美文网首页
Sass 学习笔记

Sass 学习笔记

作者: Lareina林暖暖 | 来源:发表于2017-02-27 11:42 被阅读0次

一、 简介

    CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些编程的特性,将 CSS 作为目标生成文件,然后开发者就只要使用这种语言进行编码工作。
     通俗的说,“CSS 预处理器用一种专门的编程语言,进行 Web 页面样式设计,然后再编译成正常的 CSS 文件,以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性,无需考虑浏览器的兼容性问题”,例如你可以在 CSS 中使用变量、简单的逻辑程序、函数(如右侧代码编辑器中就使用了变量$color)等等在编程语言中的一些基本特性,可以让你的 CSS 更加简洁、适应性更强、可读性更佳,更易于代码的维护等诸多好处。
     Sass、Less,和Stylus是众多CSS预处理器语言中使用最广泛的。
     SASS与SCSS的区别:Sass 和 SCSS 其实是同一种东西,我们平时都称之为 Sass,两者之间不同之处有以下两点:1.文件扩展名不同,Sass 是以“.sass”后缀为扩展名,而 SCSS 是以“.scss”后缀为扩展名。2.语法书写方式不同,Sass 是以严格的缩进式语法规则来书写,不带大括号({})和分号(;),而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。
     SASS提供四个[编译风格]的选项:

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

二、用法(可与less对比)

(一)变量
     $变量名
     普通变量:$变量名:值;
     默认变量:$变量名:值!default;
     变量调用:$变量名
     建议在以下条件使用变量的声明 1.该值至少重复出现了两次;2.该值至少可能会被更新一次;3.该值所有的表现都与变量有关(非巧合)。
(二)嵌套
      sass与less相同,均可以进行选择器的嵌套,表示层级关系
(三)导入
      在一个sass文件中可以导入另一sass文件,最后编译为一个css文件
      @import ‘导入文件名’        //导入的sass文件名不带后缀
(四)混合、继承/拓展
    单纯的将一个类的属性应用到另一个类中而无需传入参数时,在复用时前加@extend
    eg: .message {
             border: 1px solid #ccc;
             padding: 10px;
             color: #333;
           }
           .success {
             @extend .message;
             border-color: green;
           }
           .error {
             @extend .message;
             border-color: red;
           }
    若需要传入参数,则在需要传入的类名前加@mixin  ,在混合使用时前加@include
    @mixin:声明混合宏
    @include:来调用声明好的混合宏
    eg     @mixin box-sizing ($sizing:5px) {//此处5px为默认值,也可以传入多个参数
                 -webkit-box-sizing:$sizing;     
                 -moz-box-sizing:$sizing;
                 box-sizing:$sizing;
               }
               .box-border{
                   border:1px solid #ccc;
                   @include box-sizing(border-box);
               }
(五)运算   可编译时进行简单加减乘除运算
             如:变量与变量,值与值,颜色与颜色,字符(串)与字符(串)
(六)颜色 
            sass中集成了大量的颜色函数,让变换颜色更加简单。
            eg:    color:darken(#08c,10%);
(七)占位符 %placeholder
          %placeholder 声明的代码,如果不被 @extend 调用的话,不会产生任何代码。
 eg:  %mt5 {
              margin-top: 5px;
            }
            %pt5{
              padding-top: 5px;
            }
            .btn {
              @extend %mt5;
              @extend %pt5;
            }
            .block {
              @extend %mt5;
              span {
                @extend %pt5;
              }
            }
       编译后的css:
         .btn, .block {
              margin-top: 5px;
          }
         .btn, .block span {
              padding-top: 5px;
           }
(七)混合宏 VS 继承 VS 占位符
       ![Paste_Image.png](https://img.haomeiwen.com/i2585936/79ccb42fedf48f45.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
 (八)插值
           #{$变量名}当你想设置属性值的时候你可以使用字符串插入进来
          @mixin generate-sizes($class, $small, $medium, $big) {
             .#{$class}-small { font-size: $small; }
             .#{$class}-medium { font-size: $medium; }
             .#{$class}-big { font-size: $big; }
           }
          @include generate-sizes("header-text", 12px, 20px, 40px);
          编译出来的css:
          css.header-text-small { font-size: 12px; }
          .header-text-medium { font-size: 20px; }
          .header-text-big { font-size: 40px; }
          局限性:1.可能会删除用于 Sass 变量的插值。2.不能在 mixin 中调用。3.不能在include中调用(但是可以使用 @extend 中使用插值。)
   (九)注释
      同less一样,可使用“/* */”  和“//”进行注释,区别在于使用“//”注释的文字编译后生成的css文件中不会显示注释部分,而“/* */”得注释内容会出现在编译后的css文件中        
   (十)数据类型
          Sass 和 JavaScript 语言类似,也具有自己的数据类型,在 Sass 中包含以下几种数据类型:
         (1) 数字: 如,1、 2、 13、 10px;
          (2)字符串:有引号字符串或无引号字符串,如,"foo"、 'bar'、 baz;
                  注意:1.使用 #{ }插值语句 (interpolation) 时,有引号字符串将被编译为无引号字符串,这样方便了在混合指令 (mixin) 中引用选择器名。
                             2.当 deprecated = property syntax 时 (暂时不理解是怎样的情况),所有的字符串都将被编译为无引号字符串,不论是否使用了引号
          (3)颜色:如,blue、 #04a3f9、 rgba(255,0,0,0.5);
          (4)布尔型:如,true、 false;
          (5)空值:如,null;
          (6)值列表:通过空格或者逗号分隔的一系列的值,如:margin: 10px 15px 0 0
              事实上独立的值也被视为值列表——只包含一个值的值列表。
              Sass列表函数(Sass list functions)赋予了值列表更多功能:   
                    nth函数(nth function) 可以直接访问值列表中的某一项;
                    join函数(join function) 可以将多个值列表连结在一起;
                   append函数(append function) 可以在值列表中添加值; 
                   @each规则(@each rule) 则能够给值列表中的每个项目添加样式。  
   (十一) sass的控制命令       
      (1)@if
               @if 指令是一个 SassScript,它可以根据条件来处理样式块,如果条件为 true 返回一个样式块,反之 false 返回另一个样式块。在 Sass 中除了 @if 之,还可以配合 @else if 和 @else 一起使用。 
               eg:假设要控制一个元素隐藏或显示,我们就可以定义一个混合宏,通过 @if...@else... 来判断传进参数的值来控制 display 的值。
              //SCSS
              @mixin blockOrHidden($boolean:true) {
                 @if $boolean {
                    @debug "$boolean is #{$boolean}";
                    display: block;
                  }
                 @else {
                    @debug "$boolean is #{$boolean}";
                    display: none;
                   }
              }
              .block {
                  @include blockOrHidden;
              }
              .hidden{
                  @include blockOrHidden(false);
              }
      编译出来的CSS:
              .block {
                  display: block;
              }                  
              .hidden {
                  display: none;
              }
      (2)@for循环
           在sass中有两种for循环实现方式。
          @for $i from <start> through <end>、
          @for $i from <start> to <end>
          其中,$i 表示变量、start 表示起始值、end 表示结束值
          两者区别是关键字 through 表示包括 end 这个数,而 to 则不包括 end 这个数。 
          eg:@for $i from 1 through 3 {
                           .item-#{$i} { width: 2em * $i; }
                   }
                   编译出来的 CSS:
                   .item-1 {
                           width: 2em;
                   }
                   .item-2 {
                           width: 4em;
                   }
                   .item-3 {
                           width: 6em;
                   }
      (3)@while循环
               @while 后面的条件为 true 就会执行
      (4)@each  ..  in  .. 循环
               @each $var in <list>
               其中,$var为变量名,<list>为值列表。
       (5)函数
                 字符串函数
                                 unquote($string):删除字符串中的引号;
                                 quote($string):给字符串添加引号。
                                 To-upper-case()、To-lower-case()
                 数字函数
                                percentage($value):将一个不带单位的数转换成百分比值;
                                round($value):将数值四舍五入,转换成一个最接近的整数;
                                ceil($value):将大于自己的小数转换成下一位整数;
                                floor($value):将一个数去除他的小数部分;
                                abs($value):返回一个数的绝对值;
                                min($numbers…):找出几个数值之间的最小值;
                                max($numbers…):找出几个数值之间的最大值;
                                random(): 获取随机数
                         eg:  .footer{
                                 width : percentage(0.5);//50%
                                 width : round(0.5);        //1
                                 width : ceil(0.5);            //1
                                 width : floor(0.5);          //0
                                 width : abs(-0.5);          //0.5
                                 width : min(1,2,3,4);     //1
                                 width : max(1,2,3,4);    //4
                                 width : random();          //随机数     
                           }
                 列表函数
                             length($list):返回一个列表的长度值;
                             nth($list, $n):返回一个列表中指定的某个标签值
                             join($list1, $list2, [$separator]):将两个列表连接成一个列表;
                             append($list1, $val, [$separator]):将某个值放在列表的最后;
                             zip($lists…):将几个列表结合成一个多维的列表;
                                                   zip(solid dashed,1px 2px,green blue)
                                                   ((1px "solid" #008000), (2px "dashed" #0000ff))
                             index($list, $value):返回一个值在列表中的位置值。
                Introspection函数(判断类型函数)
                             type-of($value):返回一个值的类型
                             unit($number):返回一个值的单位
                             unitless($number):判断一个值是否带有单位
                             comparable($number-1, $number-2):判断两个值是否可以做加、减和合并
               Miscellaneous 函数(三元条件函数)
                           if($condition,$if-true,$if-false)
                           表达式的意思是当 $condition 条件成立时,返回的值为 $if-true,否则返回的是 $if-false 值。
               Map(数据地图,也有人称其为数组)
                           $map: (
                               $key1: value1,
                               $key2: value2,
                               $key3: value3
                           )
                           map相关函数
                           map-get($map,$key) 函数的作用是根据 $key 参数,返回 $key 在 $map 中对应的 value 值。如果 $key 不存在 $map中,将返回 null 值。
                           map-has-key($map,$key) 函数将返回一个布尔值。当 $map 中有这个 $key,则函数返回 true,否则返回 false。
                           map-keys($map) 函数将会返回 $map 中的所有 key。这些值赋予给一个变量,那他就是一个列表。
                           map-values($map) 函数类似于 map-keys($map) 功能,不同的是 map-values($map )获取的是 $map 的所有 value 值,可以说也将是一个列表。
                           map-remove($map,$key) 函数是用来删除当前 $map 中的某一个 $key,从而得到一个新的 map。其返回的值还是一个 map。
                           keywords($args) 函数可以说是一个动态创建 map 的函数。可以通过混合宏或函数的参数变创建 map。参数也是成对出现,其中 $args 变成 key(会自动去掉$符号),而 $args 对应的值就是value。
               颜色函数
                rgb($red,$green,$blue):根据红、绿、蓝三个值创建一个颜色;
                rgba($red,$green,$blue,$alpha):根据红、绿、蓝和透明度值创建一个颜色;
                red($color):从一个颜色中获取其中红色值;
                green($color):从一个颜色中获取其中绿色值;
                blue($color):从一个颜色中获取其中蓝色值;
                mix($color-1,$color-2,[$weight]):把两种颜色混合在一起。
                关于 HSL 的颜色函数
                   hsl($hue,$saturation,$lightness):通过色相(hue)、饱和度                                                                                    (saturation)和亮度(lightness)的值创建一个颜色;
                   hsla($hue,$saturation,$lightness,$alpha):通过色相(hue)、饱和度(saturation)、亮度(lightness)和透明(alpha)的值创建一个颜色;
                   hue($color):从一个颜色中获取色相(hue)值;
                   saturation($color):从一个颜色中获取饱和度(saturation)值;
                   lightness($color):从一个颜色中获取亮度(lightness)值;
                   adjust-hue($color,$degrees):通过改变一个颜色的色相值,创建一个新的颜色;
                   lighten($color,$amount):通过改变颜色的亮度值,让颜色变亮,创建一个新的颜色;
                   darken($color,$amount):通过改变颜色的亮度值,让颜色变暗,创建一个新的颜色;
                   saturate($color,$amount):通过改变颜色的饱和度值,让颜色更饱和,从而创建一个新的颜色
                   desaturate($color,$amount):通过改变颜色的饱和度值,让颜色更少的饱和,从而创建出一个新的颜色;
                   grayscale($color):将一个颜色变成灰色,相当于desaturate($color,100%);
                   complement($color):返回一个补充色,相当于adjust-hue($color,180deg);
                   invert($color):反回一个反相色,红、绿、蓝色值倒过来,而透明度不变。
                Opacity函数
                   alpha($color) /opacity($color):获取颜色透明度值;
                   rgba($color, $alpha):改变颜色的透明度值;
                   opacify($color, $amount) / fade-in($color, $amount):使颜色更不透明;
                   transparentize($color, $amount) / fade-out($color, $amount):使颜色更加透明。
 (十二) sass的@规则
        1.@import
          Sass 扩展了 CSS 的 @import 规则,让它能够引入 SCSS 和 Sass 文件。 所有引入的 SCSS 和 Sass 文件都会被合并并输出一个单一的 CSS 文件。 另外,被导入的文件中所定义的变量或 mixins 都可以在主文件中使用。
         若导入的scss/sass文件不希望被编译,则可以在文件名前面加一个下划线(如—命名为_colors.scss文件),就能避免被编译。 并在引入该文件时省略掉文件名前面的下划线(@import "colors";//不用加下划线)。
         *注意,在同一个目录不能同时存在带下划线和不带下划线的同名文件。 例如, _colors.scss 不能与 colors.scss 并存。

      2.@media
        <media type>:指定设备类型(IE8及以下只能实现CSS2中,即设置媒体类型)
        <expression>:指定媒体查询使用的媒体特性(css3)
       @media 指令和 CSS 的使用规则一样的简单,但它有另外一个功能,可以嵌套在 CSS 规则中。有点类似 JS 的冒泡功能一样,如果在样式中使用 @media 指令,它将冒泡到外面。
     3.@extend
        .@extend 是用来扩展选择器(类选择器,其他任何选择器,如a:hover等)或占位符(%***)
     4.@at-root
     @at-root 从字面上解释就是跳出根元素。当你选择器嵌套多层之后,想让某个选择器跳出,此时就可以使用 @at-root。
     5.@debug
     @debug 在 Sass 中是用来调试的,当你的在 Sass 的源码中使用了 @debug 指令之后,Sass 代码在编译出错时,在命令终端会输出你设置的提示 Bug
     6.@warn 
     @warn 和 @debug 功能类似,用来帮助我们更好的调试 Sass
     7.@error 
     @error和 @warn、@debug 功能是如出一辙

相关文章

  • sass笔记-1|Sass是如何帮你又快又好地搞定CSS的

    Sass学习笔记持续整理中,开篇不讲怎么安装,sass是什么,这些搜索引擎会告诉你,我们从sass的作用开始讲起,...

  • gulp的配置

    学习笔记整理、总结 一、 sass、ruby、compass之间的关系和作用 sass是css预处理器,是基于ru...

  • Sass学习笔记

    ​ Sass是使用Ruby语言编写的css预处理语言,诞生于2007年。Sass, LESS, stylus等...

  • sass学习笔记

    title: vue 中使用 sass Sass 是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增加了...

  • SASS学习笔记

    本文github地址: 安装SASS SASS有2中格式,一种是早期具有缩进风格的sass文件,一种是当前推荐的s...

  • Sass 学习笔记

    本文以 sass 语法点为主线展开,但语法细节不在此赘述,如有疑问请移驾至 http://sass-lang.co...

  • Sass学习笔记

    1.优越体现 可以定义变量,方便统一修改和维护。 可以进行选择器的嵌套,表示层级关系。 如导入其他sass文件,最...

  • sass学习笔记

    安装运行 1.下载ruby并安装 2.安装之后打开命令行执行gem命令,检查是否已经安装好 安装完ruby之后,在...

  • SASS学习笔记

    SASS学习笔记 文件后缀名 sass有两种后缀名文件:一种后缀名为sass,不使用大括号和分号;另一种是scss...

  • SASS 学习笔记

    什么是SASS SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变...

网友评论

      本文标题:Sass 学习笔记

      本文链接:https://www.haomeiwen.com/subject/umdhwttx.html