css预处理器之sass0805

css预处理器之sass

1.基础

1.什么是SASS(Syntactically Awesome Stylesheets Sass)?

​ SASS是一套利用Ruby实现的, 最早最成熟的CSS预处理器, 诞生于2007年.
​ 它扩展了 CSS 语言,增加了变量、Mixin(混合)、嵌套、函数和运算等特性,使 CSS 更易维护和扩1

1.2 如何学习SASS?

​ LESS是一套利用JavaScript实现的CSS预处理器, 诞生于2009年.
​ 由于LESS的诞生比SASS要晚, 并且LESS受到了Sass的影响, 所以在LESS中能看到大量SASS中的特性.
​ 所以只要学会了LESS就等同于学会了大部分的SASS

1.3 LESS和SASS文件后缀名区别

LESS以.less结尾

​ SASS以.sass或者.scss结尾
​ 两种不同结尾方式区别: .sass结尾以缩进替代{}表示层级结构, 语句后面不用编写分号
​ .scss以{}表示层级结构, 语句后面需要写分号
​ 企业开发中推荐使用.scss结尾
​ 注意点: 如果需要使用考拉编译sass文件, 项目目录结构中(包含文件名)不能出现中文和特殊字符

2.注释

​ SASS中的注释和LESS一样
​ 单行注释不会被编译(不会出现在编译后的文件中)
​ 多行注释会被编译 (会出现在编译后的文件中)

3.变量

  •    /* 1.SASS中的变量
        SASS中的变量和LESS中一样, 只是定义格式不同
        LESS中定义变量   @变量名称: 值;
        SASS中定义办理   $变量名称: 值;
       
        2.SASS中变量特点
        SASS中变量特点和LESS中几乎一样
        2.1后定义覆盖先定义
        2.2可以把变量赋值给其它变量
        2.3区分全局变量和局部变量(访问采用就近原则)
    
        注意点: LESS中变量是延迟加载, 可以先使用后定义
         SASS中变量不是延迟加载, 不可以先使用后定义
         */
    

4.变量插值

  •  /*
    1.什么是变量插值?
    如果是属性的取值可以直接使用变量,
    但是如果是属性名称或者选择器名称并不能直接使用变量, 必须使用变量插值的格式
    
    2.SASS中的变量插值
    SASS中的变量插值和LESS中也一样, 只不过格式不一样
    LESS变量插值格式: @{变量名称}
    SASS变量插值格式: #{$变量名称}
    */
    

5.运算

  • /*
     1.SASS中的运算?
     SASS中的运算和LESS也一样, 都支持+ - * / 运算
     注意点: 无论是LESS中的运算还是SASS中的运算都需要加上()
     */
    

6.混合

  • /*
     1.SASS中的混合
     SASS中的混合和LESS中也一样, 只是定义格式和调用的格式不同
     LESS中混合定义: .混合名称{} 或者 .混合名称(){}
     LESS中混合调用: .混合名称; 或者 .混合名称();
    
     SASS中混合定义: @mixin 混合名称{}; 或者 @mixin 混合名称(){};
     SASS中混合调用: @include 混合名称; 或者 @include 混合名称();
     */
    

7.带参数混合

  •  /*
    1.SASS中带参数的混合
    SASS中带参数的混合和LESS中也一样
    1.1不带默认值形参
    1.2带默认值形参
    1.3给指定参数赋值
    */
    

8.可变参数混合

  •  /*
    1.SASS中的可变参数
    SASS中的可变参数和LESS中也一样,
    只不过由于SASS不是使用JS实现的, 所以不能直接在混合中使用arguments
    必须通过 $args...的格式来定义可变参数, 然后通过$args来使用
    
    注意点: 和LESS一样可变参数必须写在形参列表的最后
    */
    /*
    @mixin animate($name, $time, $mode, $delay){
      transition: $name $time $mode $delay;
    }
     */
    /*
    @mixin animate($args...){
      transition: $args;
    }
     */
    div {
      width: 200px;
      height: 200px;
      background: red;
      transition: all 4s linear, 0s;
    }
    

9.导入其他sass

  • /*
    1..scss文件中导入其它.scss文件
    和LESS一样SASS文件中也支持导入其它SASS文件
    
    其实原生的CSS也支持通过@import导入其它的CSS文件, 只不过不常用
    
    不常用的原因在于原生的@import导入其它的CSS文件,
    只有执行到@import时浏觅器才会去下载对应 css文件,这导致请求次数变多,页面加载起来特别慢
    
    而LESS和SASS中的@import是直接将导入的文件拷贝到当前文件中生成一份CSS, 所以只会请求一次, 速度更快
    */
    

10.内置函数

  • /*
    1.SASS中的内置函数
    和LESS一样, SASS中也提供了很多内置函数方便我们使用
    */
    
    // 字符串函数
    /*
    unquote($string):删除字符串中的引号;
    quote($string):给字符串添加引号;
    To-upper-case($string):将字符串小写字母转换为大写字母
    To-lower-case($string):将字符串大写字母转换为小写字母
    */
    // 数值函数
    /*
    percentage($value):将不带单位的数转换成百分比值;
    round($value):将数值四舍五入,转换成一个最接近的整数;
    ceil($value):向上取整;
    floor($value):向下取整;
    abs($value):取数的绝对值;
    min($numbers…):找出几个数值之间的最小值;
    max($numbers…):找出几个数值之间的最大值;
    random(): 获取随机数
    */
    // 颜色函数
    /*
    rgb($red,$green,$blue):根据红、绿、蓝三个值创建一个颜色;
    rgba($red,$green,$blue,$alpha):根据红、绿、蓝和透明度值创建一个颜色;
    red($color):从一个颜色中获取其中红色值;
    green($color):从一个颜色中获取其中绿色值;
    blue($color):从一个颜色中获取其中蓝色值;
    mix($color-1,$color-2,[$weight]):把两种颜色混合在一起。
    */
    // 列表函数
    /*
    length($list):返回一个列表的长度值;
    nth($list, $n):返回一个列表中指定的某个标签值;
    join($list1, $list2, [$separator]):将两个列给连接在一起,变成一个列表;
    append($list1, $val, [$separator]):将某个值放在列表的最后;
    zip($lists…):将几个列表结合成一个多维的列表;
    index($list, $value):返回一个值在列表中的位置值。
    */
    

11层级结构

  •  /*
    1.SASS中的层级结构
    和LESS一样支持嵌套, 默认情况下嵌套的结构会转换成后代选择器
    和LESS一样也支持通过&符号不转换成后代选择器
    */
    

12.继承

  • /*
    1.SASS中的继承
    SASS中的继承和LESS中的继承一样, 都是通过并集选择器来实现的, 只不过格式不一样而已
    
    混合和继承区别
    混合是直接拷贝, 有多少个地方用到就会拷贝多少份
    继承是通过并集选择器, 不会拷贝只会保留一份
    */
    .center{  //定义一个类  没有圆括号哦
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    .father {
      @extend .center;
      width: 300px;
      height: 300px;
      background: red;
      .son {
      width: 200px;
      height: 200px;
      background: blue;
      }
    }
    

13.条件判断

  • /*
    1.SASS中的条件判断
    和LESS一样SASS中也支持条件判断, 只不过SASS中的条件判断支持得更为彻底
    SASS中支持
    @if(条件语句){}
    @else if(条件语句){}
    ... ...
    @else(条件语句){}
    SASS中当条件不为false或者null时就会执行{}中的代码
    和LESS一样SASS中的条件语句支持通过> >= < <= ==进行判断
    */
    @mixin triangle($dir,$width,$color){
      width: 0;
      height: 0;
      border-width: $width;
      border-style: solid solid solid solid;
        if($dir == Up){
            border-color: $color transparent transparent transparent;
        }
       
    }
    

14.循环

  • /*
    1.SASS中的循环
    SASS比LESS牛逼的地方就在于SASS中直接支持循环语句, 而LESS中需要通过混合+条件判断自己实现
    SASS中支持两种循环, 分别是for循环和while循环
    
    2.for循环
    @for $i from 起始整数 through 结束整数{}
    @for $i from 起始整数 to 结束整数{}
    两者的区别 through包头包尾, to包头不包尾
    
    3.while循环
    @while(条件语句){}
    */
    ul li {
      width: 100%;
      height: 50px;
      border: 1px solid #000;
      font-size: 20px;
      color: #fff;
      background: red;
        //for
      @for $i from 5 through 8{
          &:nth-child(#{$i}){
               background: blue;
            }
        }
        //while
       $i:5;
       @while($i<=8){
           &:nth-child(#{$i}){
               background: blue;
            }
          $i:$i+1;
        }
    }
    
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容