CSS_scss基本使用及操作函数使用

怼烎@ 2022-12-30 10:52 283阅读 0赞

# 基本使用 #

## 1、定义变量及变量使用 ##

*  常规使用 $var
 *  拼字符串 \#\{$var\}
 *  用于计算 $var + $var

/*** scss ***/
    $width: 1px;
    $width2: 2px;
    $pos: bottom; .aa { 
        width: $width; // 常规使用 border-#{ $pos}: 1px solid red;  // 拼字符串
    }
    .bb { 
        width: $width + $width2;  // 用于计算
    }
    
    /*** css ***/
    .aa { 
      width: 1px;
      border-bottom: 1px solid red;
    }
    .bb { 
      width: 3px;
    }

## 2、嵌套 ##

*  选择器嵌套
 *  属性嵌套

// 选择器嵌套 div{   
        color: red; p { 
        color: green;
        }
        &:hover{ 
            color: blue;
        }
    }
    
    // 属性嵌套 .div{   
    //注：嵌套属性后面必须写冒号 如：border： border: {     
        style: solid; left: { 
          width: 4px;
          color: #888;
        }
      }
    }

## 3、 继承 ##

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

.class1{ 
        border: 1px solid #ddd;   
    }
    .class2{ 
        @extend .class1;
        color: #000;
    }

## 4、 Mixin ##

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

//使用@mixin 定义一个可重用的代码段
    @mixin left { 
        float: left;
        margin-left: 10px;
    }
    //使用@include 调用 div{ 
        @include left;
    }

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

@mixin left($value: 10px) { 
    　　float: left;
    　　margin-right: $value;
    }
    div { 
    　　@include left(20px);
    }

## 5、颜色函数 ##

lighten(#cc3, 10%);  //颜色变浅
    darken(#cc3, 10%);   //颜色加深
    grayscale(#cc3);     //灰度
    complement(#cc3);    //反色

## 6、注释 ##

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

## 7、插入文件 ##

@import "path/filename.scss";
    @import "foo.css";

## 8、编译风格 ##

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

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

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

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

*  列表嵌套
 *  列表索引是从1开始
 *  列表长度length($list)
 *  获取列表项nth($list, 1)

$list: ( 
      ('item-1.1', 'item-1.2', 'item-1.3'), 
      ('item-2.1', 'item-2.2', 'item-2.3'), 
      ('item-3.1', 'item-3.2', 'item-3.3')
    );  //（推荐）
    
    $list:  'item-1.1' 'item-1.2' 'item-1.3',
            'item-2.1' 'item-2.2' 'item-2.3',
            'item-3.1' 'item-3.2' 'item-3.3';

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

*  map-keys($map) 返回map里面所有的key(list)
 *  map-values($map) 返回map里面所有的value(list)
 *  map-get($map, key) 返回map里面指定key的value

map: (
        (theme: dark, size: 40px),
        (theme: light, size: 32px)
    );

# 操作函数 #

## 1、for循环 ##

*  @for … from … through

@for $var from <start> through <end> // 范围包括<start>和<end>的值

*  @for … from … to

@for $var from <start> to <end> // 范围包括<start>,不包括<end>的值

*  获取数组中第i项的值 nth($arr, $i)
 *  获取指定键值 map-get(nth($arr, $i), $key)

/*** scss ***/
    $arr: (
      (theme: dark, size: 40px),
      (theme: light, size: 32px)
    );
    @for $i from 1 through length($arr) {   // 遍历数组
      $item: nth($arr, $i); // 获取数组中第i项的值 .#{ map-get($item, theme)} { 
        width: map-get($item, size);  // 获取指定键值
        height: map-get($item, size);
      }
    }
    
    /*** css ***/
    .dark { 
      width: 40px;
      height: 40px;
    }
    .light { 
      width: 32px;
      height: 32px;
    }

## 2、each ##

*  @each $var in

/*** scss ***/
    $name: "aa", "bb";  //注意数组list的写法
    @each $i in $name { 
       div.#{ $i} { 
           width: 100px;
       }
    }
    
    $name2: (name1: "span", name2: "div");  //注意对象map的写法
    @each $i in $name2 { 
       .#{ $i} { 
           width: 20px;
       }
    }
    
    $name3: (name11: 2, name22: 3);  //注意对象map的写法
    @each $key, $value in $name3 { 
       .#{ $key} { 
           width: 10px * $value;
       }
    }
    
    /*** css ***/
    div.aa { 
     width: 100px;
    }
    div.bb { 
     width: 100px;
    }
    
    .name1 span { 
     width: 20px;
    }
    .name2 div { 
     width: 20px;
    }
    
    .name11 { 
     width: 20px;
    }
    .name22 { 
     width: 30px;
    }

## 3、while ##

/*** scss ***/
    $i: 2;
    @while $i > 0 { 
       .color#{ $i} { 
           color: #222 * $i;
       }
       $i:$i - 1; //注意: 不能写成$i:$i-1,因为会被当成字符串
    }
    
    /*** css ***/
    .color2 { 
     color: #444444;
    }
    .color1 { 
     color: #222222;
    }

## 4、if ##

*  if … if …
 *  if … else if …
 *  if … else if … else …
 *  注：不支持 if … else …

/*** scss ***/
    $width1: 100px;
    $width2: 200px; div { 
        @if $width2 > $width1 { 
            width: $width1;
        }
    }

## 5、extend ##

*  继承目标选择器的所有相关样式
 *  用!optional直接跳过空样式, 防止继承不存在的样式出错

/*** scss ***/
    .aa { 
        margin: 0 auto;
    }
    div .aa { 
        color: red;
    }
    .aa p { 
        margin: 100px;
    }
    
    .bb { 
        @extend .aa;
    }
    .cc { 
        @extend .dd!optional;  // 用optional,防止.dd不存在而导致的编译报错
    }
    
    /*** css ***/
    .aa, .bb { 
      margin: 0 auto;
    }
    div .aa, div .bb { 
      color: red;
    }
    .aa p, .bb p { 
      margin: 100px;
    }

## 6、mixin ##

*  不带参数

/*** scss ***/
    @mixin aa { 
        margin: 10px;
    }
    .bb { 
        @include aa;
    }
    
    /*** css ***/
    .bb { 
      margin: 10px;
    }

*  带参数：参数为数组

/*** scss ***/
    $margin: 100px;
    $left: 10px;
    @mixin aa($left, $margin) { 
        margin: $margin;
        left: $left;
    }
    .bb { 
        @include aa($left, $margin);
    }
    
    /*** css ***/
    .bb { 
      margin: 100px;
      left: 10px;
    }

*  带参数：参数为对象
 *  接收传递的参数必须是对象相对应key,同时需要用…传递参数

/*** scss ***/
    $map: (left: 10px, width: 100px);
    @mixin aa($left, $width) {   // 接收参数为key值
        left: $left;
        width: $width;
    }
    div { 
        @include aa($map...);  // 传递参数为对象名+...
    }
    
    /*** css ***/
    div { 
      left: 10px;
      width: 100px;
    }

*  默认参数

@mixin aa($left: 10px){ }  // 不传参数的话就用默认参数

*  不定参数

/*** scss ***/
    @mixin box-shadow($shadows...) {   //不定参数,用...
        -moz-box-shadow: $shadows;
        -webkit-box-shadow: $shadows;
        box-shadow: $shadows;
    }
    .shadows { 
      @include box-shadow(2px 2px 2px #eee);
    }
    
    /*** css ***/
    .shadows { 
      -moz-box-shadow: 2px 2px 2px #eee;
      -webkit-box-shadow: 2px 2px 2px #eee;
      box-shadow: 2px 2px 2px #eee;
    }

## 7、function ##

/*** scss ***/
    $width: 20px;
    @function fun($width) { 
        @return $width * 2;
    }
    div { 
        width: fun($width);
    }
    
    /*** css ***/
    div { 
      width: 40px;
    }