scss基本使用及操作函数

操作函数

1、for循环

  • @for … from … through
 @for $var from <start> through <end> // 范围包括<start>和<end>的值
  • 1
  • @for … from … to
@for $var from <start> to <end> // 范围包括<start>,不包括<end>的值
  • 1
  • 获取数组中第i项的值 nth($arr, $i)
  • 获取指定键值 map-get(nth($arr, $i), $key)
  1.  
    /*** scss ***/
  2.  
    $arr: (
  3.  
    (theme: dark, size: 40px),
  4.  
    (theme: light, size: 32px)
  5.  
    );
  6.  
    @for $i from 1 through length($arr) { // 遍历数组
  7.  
    $item: nth($arr, $i); // 获取数组中第i项的值
  8.  
     
  9.  
    .#{map-get($item, theme)} {
  10.  
    map-get($item, size); // 获取指定键值
  11.  
    height: map-get($item, size);
  12.  
    }
  13.  
    }
  14.  
     
  15.  
    /*** css ***/
  16.  
    .dark {
  17.  
    40px;
  18.  
    height: 40px;
  19.  
    }
  20.  
    .light {
  21.  
    32px;
  22.  
    height: 32px;
  23.  
    }
  • 1

2、each

  • @each $var in <list or map>
  1.  
    /*** scss ***/
  2.  
    $name: "aa", "bb"; //注意数组list的写法
  3.  
    @each $i in $name {
  4.  
    div.#{$i} {
  5.  
    width: 100px;
  6.  
    }
  7.  
    }
  8.  
     
  9.  
    $name2: (name1: "span", name2: "div"); //注意对象map的写法
  10.  
    @each $i in $name2 {
  11.  
    .#{$i} {
  12.  
    width: 20px;
  13.  
    }
  14.  
    }
  15.  
     
  16.  
    $name3: (name11: 2, name22: 3); //注意对象map的写法
  17.  
    @each $key, $value in $name3 {
  18.  
    .#{$key} {
  19.  
    width: 10px * $value;
  20.  
    }
  21.  
    }
  22.  
     
  23.  
    /*** css ***/
  24.  
    div.aa {
  25.  
    width: 100px;
  26.  
    }
  27.  
    div.bb {
  28.  
    width: 100px;
  29.  
    }
  30.  
     
  31.  
    .name1 span {
  32.  
    width: 20px;
  33.  
    }
  34.  
    .name2 div {
  35.  
    width: 20px;
  36.  
    }
  37.  
     
  38.  
    .name11 {
  39.  
    width: 20px;
  40.  
    }
  41.  
    .name22 {
  42.  
    width: 30px;
  43.  
    }

3、while

  1.  
    /*** scss ***/
  2.  
    $i: 2;
  3.  
    @while $i > 0 {
  4.  
    .color#{$i} {
  5.  
    color: #222 * $i;
  6.  
    }
  7.  
    $i:$i - 1; //注意: 不能写成$i:$i-1,因为会被当成字符串
  8.  
    }
  9.  
     
  10.  
    /*** css ***/
  11.  
    .color2 {
  12.  
    color: #444444;
  13.  
    }
  14.  
    .color1 {
  15.  
    color: #222222;
  16.  
    }
  • 1
  • 2
  • 3

4、if

  • if … if …
  • if … else if …

  • if … else if … else …

    注：不支持 if … else …

  1.  
    /*** scss ***/
  2.  
    $width1: 100px;
  3.  
    $width2: 200px;
  4.  
    div {
  5.  
    @if $width2 > $width1 {
  6.  
    $width1;
  7.  
    }
  8.  
    }

5、extend

  • 继承目标选择器的所有相关样式
  • 用!optional直接跳过空样式, 防止继承不存在的样式出错
  1.  
    /*** scss ***/
  2.  
    .aa {
  3.  
    margin: 0 auto;
  4.  
    }
  5.  
    div .aa {
  6.  
    color: red;
  7.  
    }
  8.  
    .aa p {
  9.  
    margin: 100px;
  10.  
    }
  11.  
     
  12.  
    .bb {
  13.  
    @extend .aa;
  14.  
    }
  15.  
    .cc {
  16.  
    @extend .dd!optional; // 用optional,防止.dd不存在而导致的编译报错
  17.  
    }
  18.  
     
  19.  
    /*** css ***/
  20.  
    .aa, .bb {
  21.  
    margin: 0 auto;
  22.  
    }
  23.  
    div .aa, div .bb {
  24.  
    color: red;
  25.  
    }
  26.  
    .aa p, .bb p {
  27.  
    margin: 100px;
  28.  
    }

6、mixin

  • 不带参数
  1.  
    /*** scss ***/
  2.  
    @mixin aa {
  3.  
    margin: 10px;
  4.  
    }
  5.  
    .bb {
  6.  
    @include aa;
  7.  
    }
  8.  
     
  9.  
    /*** css ***/
  10.  
    .bb {
  11.  
    margin: 10px;
  12.  
    }
  • 带参数：参数为数组
  1.  
    /*** scss ***/
  2.  
    $margin: 100px;
  3.  
    $left: 10px;
  4.  
    @mixin aa($left, $margin) {
  5.  
    margin: $margin;
  6.  
    left: $left;
  7.  
    }
  8.  
    .bb {
  9.  
    @include aa($left, $margin);
  10.  
    }
  11.  
     
  12.  
    /*** css ***/
  13.  
    .bb {
  14.  
    margin: 100px;
  15.  
    left: 10px;
  16.  
    }
  • 1
  • 2
  • 带参数：参数为对象
    接收传递的参数必须是对象相对应key,同时需要用…传递参数
  1.  
    /*** scss ***/
  2.  
    $map: (left: 10px, 100px);
  3.  
    @mixin aa($left, $width) { // 接收参数为key值
  4.  
    left: $left;
  5.  
    $width;
  6.  
    }
  7.  
    div {
  8.  
    @include aa($map...); // 传递参数为对象名+...
  9.  
    }
  10.  
     
  11.  
    /*** css ***/
  12.  
    div {
  13.  
    left: 10px;
  14.  
    100px;
  15.  
    }
  • 1
  • 默认参数
@mixin aa($left: 10px){}  // 不传参数的话就用默认参数
  • 1
  • 不定参数
  1.  
    /*** scss ***/
  2.  
    @mixin box-shadow($shadows...) { //不定参数,用...
  3.  
    -moz-box-shadow: $shadows;
  4.  
    -webkit-box-shadow: $shadows;
  5.  
    box-shadow: $shadows;
  6.  
    }
  7.  
    .shadows {
  8.  
    @include box-shadow(2px 2px 2px #eee);
  9.  
    }
  10.  
     
  11.  
    /*** css ***/
  12.  
    .shadows {
  13.  
    -moz-box-shadow: 2px 2px 2px #eee;
  14.  
    -webkit-box-shadow: 2px 2px 2px #eee;
  15.  
    box-shadow: 2px 2px 2px #eee;
  16.  
    }
  • 1

7、function

  1.  
    /*** scss ***/
  2.  
    $ 20px;
  3.  
    @function fun($width) {
  4.  
    @return $width * 2;
  5.  
    }
  6.  
    div {
  7.  
    fun($width);
  8.  
    }
  9.  
     
  10.  
    /*** css ***/
  11.  
    div {
  12.  
    40px;
  13.  
    }
  • 1

基本使用

1、定义变量及变量使用

  • 常规使用 $var
  • 拼字符串 #{$var}
  • 用于计算 $var + $var
  1.  
    /*** scss ***/
  2.  
    $ 1px;
  3.  
    $width2: 2px;
  4.  
    $pos: bottom;
  5.  
     
  6.  
    .aa {
  7.  
    $width; // 常规使用
  8.  
    border-#{$pos}: 1px solid red; // 拼字符串
  9.  
    }
  10.  
    .bb {
  11.  
    $width + $width2; // 用于计算
  12.  
    }
  13.  
     
  14.  
    /*** css ***/
  15.  
    .aa {
  16.  
    1px;
  17.  
    border-bottom: 1px solid red;
  18.  
    }
  19.  
    .bb {
  20.  
    3px;
  21.  
    }

2、嵌套

  • 选择器嵌套
  • 属性嵌套
  1.  
    // 选择器嵌套
  2.  
    div{
  3.  
    color: red;
  4.  
    p {
  5.  
    color: green;
  6.  
    }
  7.  
    &:hover{
  8.  
    color: blue;
  9.  
    }
  10.  
    }
  11.  
     
  12.  
    // 属性嵌套
  13.  
    .div{
  14.  
    //注：嵌套属性后面必须写冒号 如：border：
  15.  
    border: {
  16.  
    style: solid;
  17.  
    left: {
  18.  
    4px;
  19.  
    color: #888;
  20.  
    }
  21.  
    }
  22.  
    }
  • 1

3、 继承

SASS允许一个选择器，继承另一个选择器。 @extend 要继承的选择器

  1.  
    .class1{
  2.  
    border: 1px solid #ddd;
  3.  
    }
  4.  
    .class2{
  5.  
    @extend .class1;
  6.  
    color: #000;
  7.  
    }
  • 1

4、 Mixin

Mixin有点像C语言的宏（macro），是可以重用的代码块。

  1.  
    //使用@mixin 定义一个可重用的代码段
  2.  
    @mixin left {
  3.  
    float: left;
  4.  
    margin-left: 10px;
  5.  
    }
  6.  
    //使用@include 调用
  7.  
    div{
  8.  
    @include left;
  9.  
    }

1

  • 2

mixin的强大之处，在于可以指定参数和缺省值。使用的时候，根据需要加入参数。

  1.  
    @mixin left($value: 10px) {
  2.  
    　　float: left;
  3.  
    　　margin-right: $value;
  4.  
    }
  5.  
    div {
  6.  
    　　@include left(20px);
  7.  
    }
  • 1

5、颜色函数

  1.  
    lighten(#cc3, 10%); //颜色变浅
  2.  
    darken(#cc3, 10%); //颜色加深
  3.  
    grayscale(#cc3); //灰度
  4.  
    complement(#cc3); //反色
  • 1
  • 2
  • 3
  • 4

6、注释

SASS共有两种注释风格。 标准的CSS注释 /* comment */ ，会保留到编译后的文件。 单行注释 //
comment，只保留在SASS源文件中，编译后被省略。
在/*后面加一个感叹号，表示这是”重要注释”。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。

7、插入文件

  1.  
    @import "path/filename.scss";
  2.  
    @import "foo.css";
  • 1
  • 2

8、编译风格

nested：嵌套缩进的css代码，它是默认值。
expanded：没有缩进的、扩展的css代码。
compact：简洁格式的css代码。
compressed：压缩后的css代码。

9、List（相当于js中的数组）

定义列表

  1.  
    $list: 'item-1', 'item-2', 'item-3'; //（推荐）
  2.  
     
  3.  
    $list-space1: 'item-1' 'item-2' 'item-3';
  4.  
    $list-space2: ('item-1' 'item-2' 'item-3');
  5.  
    $list-space3: ('item-1', 'item-2', 'item-3');
  • 1
  • 2
  • 3
  • 4
  • 5

注：1、在Scss中括号不是用来创建列表（除非是空的列表），而是用来做为分隔符
2、和CSS一样，只要没有特殊字符，列表项的引号是可以省略的

列表嵌套

  1.  
    $list: (
  2.  
    ('item-1.1', 'item-1.2', 'item-1.3'),
  3.  
    ('item-2.1', 'item-2.2', 'item-2.3'),
  4.  
    ('item-3.1', 'item-3.2', 'item-3.3')
  5.  
    ); //（推荐）
  6.  
     
  7.  
    $list: 'item-1.1' 'item-1.2' 'item-1.3',
  8.  
    'item-2.1' 'item-2.2' 'item-2.3',
  9.  
    'item-3.1' 'item-3.2' 'item-3.3';
  • 1
  • 2

列表索引是从1开始

列表长度length($list)

获取列表项nth($list, 1)

10、Map（相当于js中的json）

  1.  
    map: (
  2.  
    (theme: dark, size: 40px),
  3.  
    (theme: light, size: 32px)
  4.  
    );
  • 1
  • 2
  • 3
  • 4

map-keys($map) 返回map里面所有的key(list)

map-values($map) 返回map里面所有的value(list)

map-get($map, key) 返回map里面指定key的value

转载于:https://www.cnblogs.com/Zting00/p/7497640.html

 
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/onesea/p/15005515.html