您的位置:新葡亰496net > 新葡亰官网 > 新葡亰496net:新手指南,一种CSS预处理器语言

新葡亰496net:新手指南,一种CSS预处理器语言

发布时间:2019-09-23 02:28编辑:新葡亰官网浏览(54)

    SASS 新手指南

    2013/01/26 · CSS · CSS

    英文原文:teamtreehouse.com,编译:w3cplus – 大漠

    什么是Sass?

    Sass是一门非常优秀的CSS预处语言,他是由Hampton Catlin创立的。它可以减化CSS的工作流,使开发者更加容易开发,维护CSS样式。

    例如,你是否在特定的样式表中查找和替换一个十六进制的颜色而烦恼?或者你正在寻找一个计算器为多栏布局的宽度计算而头痛?(不用担心,Sass能帮你解决这样的烦恼)。

    新葡亰496net 1

    本文将介绍Sass的一些基本概念,比如说“变量”、“混合参数”、“嵌套”和“选择器继承”等。

    Sass和CSS非常相似,但是在Sass中是没有花括号({})和分号(;)的。

    如下面的CSS:

    CSS

    #skyscraper_ad { display: block; width: 120px; height: 600px; } #leaderboard_ad { display: block; width: 728px; height: 90px; }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    #skyscraper_ad {
      display: block;
      width: 120px;
      height: 600px;
    }
    #leaderboard_ad {
      display: block;
      width: 728px;
      height: 90px;
    }

    在Sass中,上面的CSS代码你要写成下面这样:

    CSS

    #skyscraper_ad display: block width: 120px height: 600px #leaderboard_ad display: block width: 728px height: 90px

    1
    2
    3
    4
    5
    6
    7
    8
    #skyscraper_ad
      display: block
      width: 120px
      height: 600px
    #leaderboard_ad
      display: block
      width: 728px
      height: 90px

    Sass使用两个空格琮定义嵌套的区别。

    你现在看过了Sass是如何书写的,接下来我们一起看一些Sass方面的介绍,让Sass在你手中变得不在可怕。

    变量(Variables)

    在Sass中定义变量,是用“$”符号声明,然后后面跟变量名称。在这个例子中,定义变量“red”,在变量名后使用冒号(:),然后紧跟变量值:

    CSS

    $red: #ff4848

    1
    $red: #ff4848

    Sass还内置了函数功能,例如变暗(darken)和变亮(lighten),他们可以帮助你修改变量。

    在这个例子中,段落要使用一个比“h1”标签更深的红色,就可以这样使用:

    CSS

    $red: #ff4848 $fontsize: 12px h1 color: $red p color: darken($red,10%)

    1
    2
    3
    4
    5
    6
    $red: #ff4848
    $fontsize: 12px
    h1
      color: $red
    p
      color: darken($red,10%)

    你也可以在相同的变量上做加减运算的操作。如果我们想将颜色变黑,我们也可以在变量的基础上减一个十六进制的颜色,例如“#101”。如果我们想把字号调大“10px”,我们也可以在字号的变量基础上加上这个值。

    CSS

    /*加法和减法*/ color: $red - #101 font-size: $fontsize 10px

    1
    2
    3
    /*加法和减法*/
    color: $red - #101
    font-size: $fontsize 10px

    嵌套(Nesting)

    Sass有两种嵌套规则:

    选择器嵌套

    选择器嵌套是Sass嵌套规则中的第一种。

    Sass的嵌套类似于你的HTML嵌套:

    CSS

    $fontsize: 12px .speaker .name font: weight: bold size: $fontsize 10px .position font: size: $fontsize

    1
    2
    3
    4
    5
    6
    7
    8
    9
    $fontsize: 12px
    .speaker
      .name
        font:
          weight: bold
          size: $fontsize 10px
      .position
        font:
          size: $fontsize

    如果你看了Sass生成的CSS,你可以看到“.name”嵌套在“.speaker”内,这里生成的CSS选择器是“.speaker .name”。

    CSS

    .speaker .name { font-weight: bold; font-size: 22px; } .speaker .position { font-size: 12px; }

    1
    2
    3
    4
    5
    6
    7
    .speaker .name {
      font-weight: bold;
      font-size: 22px;
    }
    .speaker .position {
      font-size: 12px;
    }

    属性嵌套

    属性嵌套是Sass嵌套的第二种

    相同前缀的属性,你可以进行嵌套:

    CSS

    $fontsize: 12px .speaker .name font: weight: bold size: $fontsize 10px .position font: size: $fontsize

    1
    2
    3
    4
    5
    6
    7
    8
    9
    $fontsize: 12px
    .speaker
      .name
        font:
          weight: bold
          size: $fontsize 10px
      .position
        font:
          size: $fontsize

    在上面的例子中,我们有一个“font:”,在新的一行增加两个空格放置他的属性(通常我们看到的是使用连字符“-”来连接)。

    因此我们先写“font:”属性,然后断行空两格,写“weight:”属性,在CSS中就变成了“font-weight:”属性。

    CSS

    .speaker .name { font-weight: bold; font-size: 22px; } .speaker .position { font-size: 12px; }

    1
    2
    3
    4
    5
    6
    7
    .speaker .name {
      font-weight: bold;
      font-size: 22px;
    }
    .speaker .position {
      font-size: 12px;
    }

    所有连字符的选择器都支持。

    这种嵌套用来组织你的CSS结构是非常棒的,可以让你不在写一些重复的代码。

    混合(Mixins)

    混合是Sass中另一个很优秀的特性。混合可以让你定义一整块的Sass代码,甚至你可以给他们定义参数,更酷的是你还可以设置默认值。

    使用关键词“@mixin”来定义Sass的混合,你可以你自己的喜好定义一个混合的名称。如果你需要设置一些参数,你还可以将参数设置到这些代码片段中;如果你需要设置默认值,你也可以在混合的代码片段中设置默认值。

    调用混合代码片段,可以使用Sass中的关键词“@include”调用,并在其后面跟上你的混合代码片段的名称,你还可以使用括号,在里面设置一些参数。

    来看一个简单的例子:

    CSS

    @mixin border-radius($amount: 5px) -moz-border-radius: $amount -webkit-border-radius: $amount border-radius: $amount h1 @include border-radius(2px) .speaker @include border-radius

    1
    2
    3
    4
    5
    6
    7
    8
    @mixin border-radius($amount: 5px)
      -moz-border-radius: $amount
      -webkit-border-radius: $amount
      border-radius: $amount
    h1
      @include border-radius(2px)
    .speaker
      @include border-radius

    上面的Sass代码将转译成下面的CSS代码:

    CSS

    h1 { -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; } .speaker { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    h1 {
      -moz-border-radius: 2px;
      -webkit-border-radius: 2px;
      border-radius: 2px;
    }
    .speaker {
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border-radius: 5px;
    }

    我们给“h1”元素指定了一个特定的圆角值,但是并没有给“.speaker”指定任何值,因此他将使用的是默认值“5px”。

    选择器继承

    选择器的继承可以让你的选择器继承另一个选择器的所有样式风格,这是一个非常优秀的特性。

    使用选择器的继承,要使用Sass的关键词“@extend”,后而跟上你需要继承的选择器,那么这个选择器就会继承另一个选择器的所有样式。(当然他们是有继承和被继承的关系)

    CSS

    h1 border: 4px solid #ff9aa9 .speaker @extend h1 border-width: 2px

    1
    2
    3
    4
    5
    h1
      border: 4px solid #ff9aa9
    .speaker
      @extend h1
      border-width: 2px

    上面的Sass代码将转译成下面的CSS代码:

    CSS

    h1, .speaker { border: 4px solid #ff9aa9; } .speaker { border-width: 2px; }

    1
    2
    3
    4
    5
    6
    7
    h1,
    .speaker {
      border: 4px solid #ff9aa9;
    }
    .speaker {
      border-width: 2px;
    }

    尝试Sass

    网上尝试

    如果你的本地电脑没有安装Sass,你可以在网上尝试使用。

    在转译之前,你需要选择底部的“Indented Syntax”选项。

    安装

    Sass是一个Ruby gem。如果你的本地已经安装了Ruby gems,那么可以在你命令终端直接运行:

    CSS

    gem install sass

    1
    gem install sass

    Sass也可以使用命令行工具将Sass文件转译成CSS文件。

    你可以键入“sass –watch sass_folder:stylesheets_folder”,这个时候你的Sass文件(文件扩展名必须是.sass)stylesheets_folder就会把转译的样式文件保存在“sass_folder”目录,当然你的sass文件必须保存在这个文件目录中。“–watch”选项的意思就是将这个目录中的sass文件转译成样式文件。

    CSS转换成Sass

    在现有的项目中通过“sass-convert”使用sass。

    在终端进入你的目录中,键入“sass-convert –from css –to sass -R .”。将CSS转换成Sass。其中“-R”表示递归,“.”表示当前目录。

    Scss

    在这里我们只介绍了Sass的语法,然后还有一个新的名称叫SCSS或者Sassy CSS。不同的是SCSS看起来更像CSS,但他也像Sass一样具有变量、混合、嵌套和选择器继承等特性。

    总结

    在你组织和管理CSS时,Sass真的很优秀。还有个项目Compass,它在CSS框架中使用混合模式,而不是去修改你的HTML结构或者重新定义你的类名。

    那你还在等什么呢?在你的下一个项目中就尝试使用Sass吧。

    赞 2 收藏 评论

    新葡亰496net 2

    ![]()

    scss的语法非常简单:

    1.webstorm 自动编译SASS
      下载安装包
      然后点击安装,路径为默认路径就行, 勾选以下两项
        add Ruby executables to your PATH
        Associate .rb and rbw files with this Ruby information
      安装完,打开命令行 输入 gem install sass
      webstorm 配置 点击setting选择tool下的file watcher 如下图:

    1.webstorm 自动编译SASS
      下载安装包
      然后点击安装,路径为默认路径就行, 勾选以下两项
        add Ruby executables to your PATH
        Associate .rb and rbw files with this Ruby information
      安装完,打开命令行 输入 gem install sass
      webstorm 配置 点击setting选择tool下的file watcher 如下图:

    $color: red;

       新葡亰496net 3

       新葡亰496net 4

    Sass是一种CSS预处理器语言,通过编程方式生成CSS代码。因为可编程,所以操控灵活性自由度高,方便实现一些直接编写CSS代码较困难的代码。
    同时,因为Sass是生成CSS的语言,所以写出来的Sass文件是不能直接用的,必须经过编译器编译成CSS文件才能使用。

    div{

      新葡亰496net 5

      新葡亰496net 6

    ## Sass有什么好处?
    Sass的主要特性如下:变量、嵌套、导入、混合、继承、运算、函数。这些特性为编写CSS加入编程控制的能力。

    color: $color;

      新葡亰496net 7

      新葡亰496net 8

    ## 如何开始使用Sass
    直接使用任何文本或代码编辑器都可以开始编辑Sass代码,要将Sass文件转换为CSS文件,则需使用Sass命令行编译器或桌面集成编译软件。
    **安装Sass编译器**
    Sass编译器使用Ruby环境,所以本地安装使用Sass编译器之前需要有Ruby环境,Ruby安装另见...
    Ruby环境准备完毕后,使用gem安装Sass:
    `gem install sass`

    }

      

      

    ##Sass语法
    #### 先分清sass与scss
    Sass使用sass和scss这两种后缀名以区分不同的语法格式:
    - sass与普通CSS的语法格式区别较大,其不使用花括号和分号。
    - scss接近普通CSS的语法格式,使用与CSS相同的花括号和分号。
    具体要使用哪种格式,

    这就是一个简单的scss代码。

    2.SCSS 和 Sass 的区别。
        SCSS 是 Sass 引入新的语法,其语法完全兼容css3,并且继承了Sass的强大的功能,SCSS 是CSS的超级(扩展),

    2.SCSS 和 Sass 的区别。
        SCSS 是 Sass 引入新的语法,其语法完全兼容css3,并且继承了Sass的强大的功能,SCSS 是CSS的超级(扩展),

    在sass格式中,取消花括号,改为使用二个空格缩进嵌套;取消分号,以行分隔。
    以下sass代码:
    ```sass
    #div1
      width:50px
      height:30px
    ```
    编译后为如下css代码:
    ```css
    #div1{
    width:50px;
    height:50px;
    }
    ```

    但是,使用 Sass 进行开发,那么是不是直接通过“<link>”引用“.scss”或“.sass”文件呢?显然是不行的,因为浏览器只能解析css文件,所以在使用的时候需要对scss文件进行编译。当然编译方法有很多,可以使用sass命令,也可以使用webpack,fis3等一些代码打包工具。

          因此,所有在CSS 中正常工作的代码也能在SCSS 中正常的工作。

          因此,所有在CSS 中正常工作的代码也能在SCSS 中正常的工作。

    选择器嵌套
    ```sass
    #sample
      .span
        font-size:12px
        font-weight:bold
    ```

    Tips:相对于scss,sass语法比较严格而且语法不太容易被前端开发者所接受,所以在后面都以scss来讲解。

    3. 使用变量:
        变量声明 $highlight-color: #f90; 如果一个变有多个值可以用逗号分隔。如:
          $plain-font: "Myriad Pro"、Myriad、"Helvetica Neue";
        当变量定义在css 规则内,那么该变量只能在此规则内使用
          变量引用: 例如:
            $highlight-color: #F90;
            .selected {
                border: 1px solid $highlight-color;
              }
            //编译后
            .selected {
                border: 1px solid #F90;
              }
          变量名用中划线还是下划线
          中划线命名的内容和下划线命名的内容是互通的
            $link-color: blue;
              a {
                color: $link_color;
              }
            //编译后
             a {
                color: blue;
            }

    3. 使用变量:
        变量声明 $highlight-color: #f90; 如果一个变有多个值可以用逗号分隔。如:
          $plain-font: "Myriad Pro"、Myriad、"Helvetica Neue";
        当变量定义在css 规则内,那么该变量只能在此规则内使用
          变量引用: 例如:
            $highlight-color: #F90;
            .selected {
                border: 1px solid $highlight-color;
              }
            //编译后
            .selected {
                border: 1px solid #F90;
              }
          变量名用中划线还是下划线
          中划线命名的内容和下划线命名的内容是互通的
            $link-color: blue;
              a {
                color: $link_color;
              }
            //编译后
             a {
                color: blue;
            }

    属性嵌套
    带有相同前缀的属性可进行嵌套
    ```sass
    #sample
      font:
        size:12px
        weight:bold
    ```

    sass命令编译

    4.嵌套css 规则
        #content {
            article {
              h1 { color: #333 }
              p { margin-bottom: 1.4em }
            }
          aside { background-color: #EEE }
        }
         /* 编译后 */
        #content article h1 { color: #333 }
        #content article p { margin-bottom: 1.4em }
        #content aside { background-color: #EEE }
      父选择器的标识符&;
        &符号,可以放在任何一个选择器可以出现的地方。
          article a {
              color: blue;
              &:hover { color: red }
            }
          /* 编译后 */
          article a{color:blue}
          article a:hover {color: red}
      群组选择器的嵌套
        .container {
            h1, h2, h3 {margin-bottom: .8em}
        }
          /* 编译后 */
        .container h1, .container h2, .container h3 { margin-bottom: .8em }
      内嵌在群组中的选择器:
        nav, aside {
          a {color: blue}
        }
          /* 编译后 */
        nav a, aside a {color: blue}
      子组合选择器和同组合选择器 : > , 和 ~ ;
        article section { margin: 5px }
          选择article 下的所有的命名中的 section 选择器的元素。
        article > section { border: 1px solid #ccc }
          选择器只会选择article 下紧跟着的子元素中命名section选择器的元素。
        header p { font-size: 1.1em }
          选择同层相邻的选择器,选择header 后面紧跟着的p 元素。
        article ~ article { border-top: 1px dashed #ccc }
      同层全体组合选择器,选择所有article 后的同层article元素。

    4.嵌套css 规则
        #content {
            article {
              h1 { color: #333 }
              p { margin-bottom: 1.4em }
            }
          aside { background-color: #EEE }
        }
         /* 编译后 */
        #content article h1 { color: #333 }
        #content article p { margin-bottom: 1.4em }
        #content aside { background-color: #EEE }
      父选择器的标识符&;
        &符号,可以放在任何一个选择器可以出现的地方。
          article a {
              color: blue;
              &:hover { color: red }
            }
          /* 编译后 */
          article a{color:blue}
          article a:hover {color: red}
      群组选择器的嵌套
        .container {
            h1, h2, h3 {margin-bottom: .8em}
        }
          /* 编译后 */
        .container h1, .container h2, .container h3 { margin-bottom: .8em }
      内嵌在群组中的选择器:
        nav, aside {
          a {color: blue}
        }
          /* 编译后 */
        nav a, aside a {color: blue}
      子组合选择器和同组合选择器 : > , 和 ~ ;
        article section { margin: 5px }
          选择article 下的所有的命名中的 section 选择器的元素。
        article > section { border: 1px solid #ccc }
          选择器只会选择article 下紧跟着的子元素中命名section选择器的元素。
        header p { font-size: 1.1em }
          选择同层相邻的选择器,选择header 后面紧跟着的p 元素。
        article ~ article { border-top: 1px dashed #ccc }
      同层全体组合选择器,选择所有article 后的同层article元素。

    变量
    ```sass
    $red:#f00
    h1
      color:$red
    ```

    scss <要编译的Scss文件路径>/style.scss:<要输出CSS文件路径>/style.css

        article {
            ~ article { border-top: 1px dashed #ccc }
            > section { background: #eee }
            dl > {
              dt { color: #333 }
              dd { color: #555 }
            }
          nav & { margin-top: 0 }
        }
          /* 编译后 */
        article ~ article { border-top: 1px dashed #ccc }
        article > footer { background: #eee }

        article {
            ~ article { border-top: 1px dashed #ccc }
            > section { background: #eee }
            dl > {
              dt { color: #333 }
              dd { color: #555 }
            }
          nav & { margin-top: 0 }
        }
          /* 编译后 */
        article ~ article { border-top: 1px dashed #ccc }
        article > footer { background: #eee }

    函数
    ```sass
    .div1
      color:darken($red,10%)
      background:lighten($red,10%)
    ```

    多文件编译

    5.导入SASS 文件
      使用sass的@import规则并不需要指明被导入文件的全名。
      你可以省略.sass或.scss文件后缀
      举例来说,@import"sidebar";这条命令将把sidebar.scss
      文件中所有样式添加到当前样式表中

    5.导入SASS 文件
      使用sass的@import规则并不需要指明被导入文件的全名。
      你可以省略.sass或.scss文件后缀
      举例来说,@import"sidebar";这条命令将把sidebar.scss
      文件中所有样式添加到当前样式表中

    表达式
    ```saaa
    p
      color:$red - #101
      font-size:$fontsize 10px;
    ```

    scss <要编译的Scss文件路径>/ :<要输出CSS文件路径>/

      当你@import一个局部文件时,还可以不写文件的全名,
      即省略文件名开头的下划线 举例来说,你想导入
      themes/_night-sky.scss这个局部文件里的变量,
      你只需在样式表中写@import "themes/night-sky";。
      默认变量值:
        在一般的情况下,反复生命一个值,最后一次生命会覆盖前面
        的声明。
      强制覆盖 !default ,用于变量。
        例如:
          $fancybox-width: 400px !default;
          .fancybox {
            width: $fancybox-width;
          }
      嵌入导入:
        sass 允许@import 命令写在css 规则内,这种导入方式下,生产的css文件是,局部
        文件会被插入到css 规则内导入它的地方,举个例子,一个名为_blue-theme.scss
        的局部文件,内容如下。
          aside {
            background: blue;
            color: white;
          }
          .blue-theme {@import "blue-theme"}
          //生成的结果跟你直接在.blue-theme选择器内写_blue-theme.scss文件
            的内容完全一样。
          . blue-theme {
              aside {
                background: blue;
                color: #fff;
              }
          }
      原生的CSS导入
        由于sass 兼容原生的css 所以它支持原生的css@import
          ● 被导入文件的名字以.css结尾;
          ● 被导入文件的名字是一个URL地址(比如
          ● 被导入文件的名字是CSS的url()值。
    6.静默注释
      sass 另外提供了一种不同于css 的注释。它以 // 开头,注释内容直到末行。
        body {
          color: #333; // 这种注释内容不会出现在生成的css文件中
          padding: 0; /* 这种注释内容会出现在生成的css文件中 */
        }

      当你@import一个局部文件时,还可以不写文件的全名,
      即省略文件名开头的下划线 举例来说,你想导入
      themes/_night-sky.scss这个局部文件里的变量,
      你只需在样式表中写@import "themes/night-sky";。
      默认变量值:
        在一般的情况下,反复生命一个值,最后一次生命会覆盖前面
        的声明。
      强制覆盖 !default ,用于变量。
        例如:
          $fancybox-width: 400px !default;
          .fancybox {
            width: $fancybox-width;
          }
      嵌入导入:
        sass 允许@import 命令写在css 规则内,这种导入方式下,生产的css文件是,局部
        文件会被插入到css 规则内导入它的地方,举个例子,一个名为_blue-theme.scss
        的局部文件,内容如下。
          aside {
            background: blue;
            color: white;
          }
          .blue-theme {@import "blue-theme"}
          //生成的结果跟你直接在.blue-theme选择器内写_blue-theme.scss文件
            的内容完全一样。
          . blue-theme {
              aside {
                background: blue;
                color: #fff;
              }
          }
      原生的CSS导入
        由于sass 兼容原生的css 所以它支持原生的css@import
          ● 被导入文件的名字以.css结尾;
          ● 被导入文件的名字是一个URL地址(比如
          ● 被导入文件的名字是CSS的url()值。
    6.静默注释
      sass 另外提供了一种不同于css 的注释。它以 // 开头,注释内容直到末行。
        body {
          color: #333; // 这种注释内容不会出现在生成的css文件中
          padding: 0; /* 这种注释内容会出现在生成的css文件中 */
        }

    混合
    重用代码
    使用@mixin关键字定义混合代码,使用@include使用混合代码
    @mixin后面是定义混合的名字
    ```sass
    @mixin border-radius($amount:5px)
    -moz-border-radius:$amount
    -webkit-border-radius:$amount
    border-radius:$amount
    h1
    @include border-radius(2px)
    .speaker
    @include border-radius
    ```
    没有给出参数,会使用设置的默认值

    这样会把文件夹下所有的.scss 文件 全部编译成css

    7.混合器:
      混合器使用@mixin 标识符定义。
        例如:
          @mixin rounded-corners {
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            border-radius: 5px;
        }
      然后就可以在你的样式表中通过@include来使用这个混合器,
      放在你希望的任何地方。@include调用会把混合器中的所有
      样式提取出来放在@include被调用的地方。如果像下边这样写:
        notice {
          background-color: green;
          border: 2px solid #00aa00;
          @include rounded-corners;
    新葡亰496net:新手指南,一种CSS预处理器语言。    }
          //sass最终生成:
        .notice {
          background-color: green;
          border: 2px solid #00aa00;
          -moz-border-radius: 5px;
          -webkit-border-radius: 5px;
          border-radius: 5px;
        }

    7.混合器:
      混合器使用@mixin 标识符定义。
        例如:
          @mixin rounded-corners {
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            border-radius: 5px;
        }
      然后就可以在你的样式表中通过@include来使用这个混合器,
      放在你希望的任何地方。@include调用会把混合器中的所有
      样式提取出来放在@include被调用的地方。如果像下边这样写:
        notice {
          background-color: green;
          border: 2px solid #00aa00;
          @include rounded-corners;
        }
          //sass最终生成:
        .notice {
          background-color: green;
          border: 2px solid #00aa00;
          -moz-border-radius: 5px;
          -webkit-border-radius: 5px;
          border-radius: 5px;
        }

    选择器继承
    使用@extend后面跟要继承的选择器
    ```sass
    h1
    border:4px solid #f00
    .speaker
    @extend h1
    border-width:2px
    ```

     

      给混合器传参:
        通过在@include 混合器时给混合器传参,来指定混合器生成的精确样式,当
          @include 混合器时,参数其实就是可以给css 属性值的变量。
          @mixin link-colors($normal,$hover,$visited) {
              color: $normal;
              $:hover {color:$hover;}
              $:visited {color:$visited;}
          }

      给混合器传参:
        通过在@include 混合器时给混合器传参,来指定混合器生成的精确样式,当
          @include 混合器时,参数其实就是可以给css 属性值的变量。
          @mixin link-colors($normal,$hover,$visited) {
              color: $normal;
              $:hover {color:$hover;}
              $:visited {color:$visited;}
          }

    缺点及解决方法:

        当混合器被@include 时,你可以把它当做一个css 函数来传参。
          a{
            @include link-colors(blue, red,green)
          }
          // Sass 最终生成的是
          a{color:blue;}
          a:hover {color:red;}
          a:visited { color: green;}
        sass 允许通过语法 $name:value 的形式指定每个参数的值,这种形式,
        的传参,参数顺序就不必在乎了,只要保证没有漏掉参数即可。
        a {
        @include link-colors(
          $normal: blue,
          $visited: green,
          $hover:red
          );
        }

    新葡亰496net:新手指南,一种CSS预处理器语言。    当混合器被@include 时,你可以把它当做一个css 函数来传参。
          a{
            @include link-colors(blue, red,green)
          }
          // Sass 最终生成的是
          a{color:blue;}
          a:hover {color:red;}
          a:visited { color: green;}
        sass 允许通过语法 $name:value 的形式指定每个参数的值,这种形式,
        的传参,参数顺序就不必在乎了,只要保证没有漏掉参数即可。
        a {
        @include link-colors(
          $normal: blue,
          $visited: green,
          $hover:red
          );
        }

    在实际编译过程中,你会发现上面的命令,只能一次性编译。每次个性保存“.scss”文件之后,都得重新执行一次这样的命令。如此操作太麻烦,其实还有一种方法,就是在编译 Sass 时,开启“watch”功能,这样只要你的代码进行任保修改,都能自动监测到代码的变化,并且给你直接编译出来:

      默认参数值:
          为了在@include 混合器时传入所有的参数,我们可以给参数制定一个默认值。
          参数默认值使用: $name: default-value 的生命形式。
          @mixin link-colors(
            $normal,
            $hover: $normal,
            $visited: $normal
          )
          {
            color: $normal;
            $:hover { color: $hover;}
            $:visited { color: $visited;}
          }
        如果这样调用: @include link-colors(red) $hover 和$visited
          也会自动赋值为red.
    8.选择器继承
        通过@extend 语法实现
        // 通过选择器继承样式
          .error {
            border: 1px red;
            background-color: #fdd;
          }
          .seriousError {
            @extend .error;
            border-width: 3px;
          }

      默认参数值:
          为了在@include 混合器时传入所有的参数,我们可以给参数制定一个默认值。
          参数默认值使用: $name: default-value 的生命形式。
          @mixin link-colors(
            $normal,
            $hover: $normal,
            $visited: $normal
          )
          {
            color: $normal;
            $:hover { color: $hover;}
            $:visited { color: $visited;}
          }
        如果这样调用: @include link-colors(red) $hover 和$visited
          也会自动赋值为red.
    8.选择器继承
        通过@extend 语法实现
        // 通过选择器继承样式
          .error {
            border: 1px red;
            background-color: #fdd;
          }
          .seriousError {
            @extend .error;
            border-width: 3px;
          }

    sass --watch <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css

     

     

    不同风格的输出方法:

    1. 嵌套输出方式 nested
    2. 展开输出方式 expanded   最直观的表达方式
    3. 紧凑输出方式 compact  在同一行显示
    4. 压缩输出方式 compressed 压缩式

    使用方法: sass --watch test.scss:test.css --style nested

    直接在命令行后面加上要输出的类型

     

    Sass 的调试

    新葡亰496net 9

    (单击可放大)

    Sass 调试一直以来都是一件头痛的事情,使用 Sass 的同学都希望能在浏览器中直接调试 Sass 文件,能找到对应的行数。值得庆幸的是,现在实现并不是一件难事,只要你的浏览器支持“sourcemap”功能即可。早一点的版本,需要在编译的时候添加“--sourcemap”  参数:

    sass --watch --scss --sourcemap style.scss:style.css

    在 Sass3.3 版本之上(我测试使用的版本是 3.4.7),不需要添加这个参数也可以:

    sass --watch style.scss:style.css

    在命令终端,你将看到一个信息:

    >>> Change detected to: style.scss

      write style.css

      write style.css.map

    这时你就可以像前面展示的 gif 图一样,调试你的 Sass 代码.

     

     

    scss的使用

    scss 声明变量

    新葡亰496net 10

    eg: $color: red ;

    div{

    color: $color;

    }

     

     

    普通变量与默认变量

    普通变量

    定义之后可以在全局范围内使用。

    $fontSize: 12px; body{ font-size:$fontSize; }

    编译后的css代码:

    body{ font-size:12px; }

     

    默认变量

    scss 的默认变量仅需要在值后面加上 !default 即可。

    $baseLineHeight:1.5 !default; body{ line-height: $baseLineHeight; }

    编译后的css代码:

    body{ line-height:1.5; }

     

    scss 的默认变量一般是用来设置默认值,然后根据需求来覆盖的,覆盖的方式也很简单,只需要在默认变量之前重新声明下变量即可。

     

    $baseLineHeight: 2; $baseLineHeight: 1.5 !default; body{ line-height: $baseLineHeight; }

    编译后的css代码:

    body{ line-height:2; }

     

    可以看出现在编译后的 line-height 为 2,而不是我们默认的 1.5。默认变量的价值在进行组件化开发的时候会非常有用。

     

     

    scss局部变量和全局变量

    scss 中变量的作用域在过去几年已经发生了一些改变。直到最近,规则集和其他范围内声明变量的作用域才默认为本地。如果已经存在同名的全局变量,从 3.4 版本开始,Sass 已经可以正确处理作用域的概念,并通过创建一个新的局部变量来代替。

    全局变量与局部变量

    先来看一下代码例子:

    //SCSS $color: orange !default;//定义全局变量(在选择器、函数、混合宏...的外面定义的变量为全局变量) .block { color: $color;//调用全局变量 } em { $color: red;//定义局部变量 a { color: $color;//调用局部变量 } } span { color: $color;//调用全局变量 }

    css 的结果:

    //CSS .block { color: orange; } em a { color: red; } span { color: orange; }

    上面的示例演示可以得知,在元素内部定义的变量不会影响其他元素。如此可以简单的理解成,全局变量就是定义在元素外面的变量,如下代码:

    $color:orange !default;

    $color 就是一个全局变量,而定义在元素内部的变量,比如 $color:red; 是一个局部变量。

    除此之外,Sass 现在还提供一个 !global 参数。!global 和 !default 对于定义变量都是很有帮助的。我们之后将会详细介绍这两个参数的使用以及其功能。

    全局变量的影子

    当在局部范围(选择器内、函数内、混合宏内...)声明一个已经存在于全局范围内的变量时,局部变量就成为了全局变量的影子。基本上,局部变量只会在局部范围内覆盖全局变量。

    上面例子中的 em 选择器内的变量 $color 就是一个全局变量的影子。

    //SCSS $color: orange !default;//定义全局变量 .block { color: $color;//调用全局变量 } em { $color: red;//定义局部变量(全局变量 $color 的影子) a { color: $color;//调用局部变量 } }

    什么时候声明变量?

    我的建议,创建变量只适用于感觉确有必要的情况下。不要为了某些骇客行为而声明新变量,这丝毫没有作用。只有满足所有下述标准时方可创建新变量:

    1. 该值至少重复出现了两次;
    2. 该值至少可能会被更新一次;
    3. 该值所有的表现都与变量有关(非巧合)。

    基本上,没有理由声明一个永远不需要更新或者只在单一地方使用变量。

    温馨小提示:您在学习 sass 时,除了在我们网页上可以做练习,还有一个便利在线编辑器网址如下:

     

    scss嵌套-选择器嵌套

    scss 中还提供了选择器嵌套功能,但这也并不意味着你在 scss 中的嵌套是无节制的,因为你嵌套的层级越深,编译出来的 CSS 代码的选择器层级将越深,这往往是大家不愿意看到的一点。这个特性现在正被众多开发者滥用。

    选择器嵌套为样式表的作者提供了一个通过局部选择器相互嵌套实现全局选择的方法,Sass 的嵌套分为三种:

    • 选择器嵌套
    • 属性嵌套
    • 伪类嵌套

    1、选择器嵌套

    假设我们有一段这样的结构:

    <header> <nav> <a href=“##”>Home</a> <a href=“##”>About</a> <a href=“##”>Blog</a> </nav> <header>

    想选中 header 中的 a 标签,在写 CSS 会这样写:

    nav a { color:red; } header nav a { color:green; }

    那么在 scss 中,就可以使用选择器的嵌套来实现:

    nav { a { color: red; header & { color:green; } } }

     

     

     

    scss嵌套-属性嵌套

    scss 中还提供属性嵌套,CSS 有一些属性前缀相同,只是后缀不一样,比如:border-top/border-right,与这个类似的还有 margin、padding、font 等属性。假设你的样式中用到了:

    .box { border-top: 1px solid red; border-bottom: 1px solid green; }

    在 scss 中我们可以这样写:

    .box { border: { top: 1px solid red; bottom: 1px solid green; } }

     

     

    scss嵌套-伪类嵌套

    其实伪类嵌套和属性嵌套非常类似,只不过他需要借助`&`符号一起配合使用。我们就拿经典的“clearfix”为例吧:

    .clearfix{ &:before, &:after { content:""; display: table; } &:after { clear:both; overflow: hidden; } }

    编译出来的 CSS:

    clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; overflow: hidden; }

    避免选择器嵌套:

    • 选择器嵌套最大的问题是将使最终的代码难以阅读。开发者需要花费巨大精力计算不同缩进级别下的选择器具体的表现效果。
    • 选择器越具体则声明语句越冗长,而且对最近选择器的引用(&)也越频繁。在某些时候,出现混淆选择器路径和探索下一级选择器的错误率很高,这非常不值得。

    为了防止此类情况,我们应该尽可能避免选择器嵌套。然而,显然只有少数情况适应这一措施。

     

    scss混合宏-声明混合宏

    如果你的整个网站中有几处小样式类似,比如颜色,字体等,在scss 可以使用变量来统一处理,那么这种选择还是不错的。但当你的样式变得越来越复杂,需要重复使用大段的样式时,使用变量就无法达到我们目了。这个时候 scss 中的混合宏就会变得非常有意义。在这一节中,主要向大家介绍 scss 的混合宏。

    1、声明混合宏

    不带参数混合宏:

    在 scss 中,使用“@mixin”来声明一个混合宏。如:

    @mixin border-radius{ -webkit-border-radius: 5px; border-radius: 5px; }

    其中 @mixin 是用来声明混合宏的关键词,有点类似 CSS 中的 @media、@font-face 一样。border-radius 是混合宏的名称。大括号里面是复用的样式代码。

    带参数混合宏:

    除了声明一个不带参数的混合宏之外,还可以在定义混合宏时带有参数,如:

    @mixin border-radius($radius:5px){ -webkit-border-radius: $radius; border-radius: $radius; }

    复杂的混合宏:

    上面是一个简单的定义混合宏的方法,当然, scss 中的混合宏还提供更为复杂的,你可以在大括号里面写上带有逻辑关系,帮助更好的做你想做的事情,如:

    @mixin box-shadow($shadow...) { @if length($shadow) >= 1 { @include prefixer(box-shadow, $shadow); } @else{ $shadow:0 0 4px rgba(0,0,0,.3); @include prefixer(box-shadow, $shadow); } }

    这个 box-shadow 的混合宏,带有多个参数,这个时候可以使用“ … ”来替代。简单的解释一下,当 $shadow 的参数数量值大于或等于“ 1 ”时,表示有多个阴影值,反之调用默认的参数值“ 0 0 4px rgba(0,0,0,.3) ”。

     

     

    scss混合宏-调用混合宏

    在 scss 中通过 @mixin 关键词声明了一个混合宏,那么在实际调用中,其匹配了一个关键词“@include”来调用声明好的混合宏。例如在你的样式中定义了一个圆角的混合宏“border-radius”:

    @mixin border-radius{ -webkit-border-radius: 3px; border-radius: 3px; }

    在一个按钮中要调用定义好的混合宏“border-radius”,可以这样使用:

    button { @include border-radius; }

    这个时候编译出来的 CSS:

    button { -webkit-border-radius: 3px; border-radius: 3px; }

     

    scss混合宏的参数--传一个不带值的参数

    scss 的混合宏有一个强大的功能,可以传参,那么在 scss 中传参主要有以下几种情形:

    A) 传一个不带值的参数

    在混合宏中,可以传一个不带任何值的参数,比如:

    @mixin border-radius($radius){ -webkit-border-radius: $radius; border-radius: $radius; }

    在混合宏“border-radius”中定义了一个不带任何值的参数“$radius”。

    在调用的时候可以给这个混合宏传一个参数值:

    .box { @include border-radius(3px); }

    这里表示给混合宏传递了一个“border-radius”的值为“3px”。

    编译出来的 CSS:

    .box { -webkit-border-radius: 3px; border-radius: 3px; }

     

    scss混合宏的参数--传一个带值的参数

    在scss 的混合宏中,还可以给混合宏的参数传一个默认值,例如:

    @mixin border-radius($radius:3px){ -webkit-border-radius: $radius; border-radius: $radius; }

    在混合宏“border-radius”传了一个参数“$radius”,而且给这个参数赋予了一个默认值“3px”。

    在调用类似这样的混合宏时,会多有一个机会,假设你的页面中的圆角很多地方都是“3px”的圆角,那么这个时候只需要调用默认的混合宏“border-radius”:

    .btn { @include border-radius; }

    编译出来的 CSS:

    .btn { -webkit-border-radius: 3px; border-radius: 3px; }

    但有的时候,页面中有些元素的圆角值不一样,那么可以随机给混合宏传值,如:

    .box { @include border-radius(50%); }

    编译出来的 CSS:

    .box { -webkit-border-radius: 50%; border-radius: 50%; }

     

     

    scss混合宏的参数--传多个参数

    scss 混合宏除了能传一个参数之外,还可以传多个参数,如:

    @mixin center($width,$height){ width: $width; height: $height; position: absolute; top: 50%; left: 50%; margin-top: -($height) / 2; margin-left: -($width) / 2; }

    在混合宏“center”就传了多个参数。在实际调用和其调用其他混合宏是一样的:

    .box-center { @include center(500px,300px); }

    编译出来 CSS:

    .box-center { width: 500px; height: 300px; position: absolute; top: 50%; left: 50%; margin-top: -150px; margin-left: -250px; }

      有一个特别的参数“…”。当混合宏传的参数过多之时,可以使用参数来替代,如:

    @mixin box-shadow($shadows...){ @if length($shadows) >= 1 { -webkit-box-shadow: $shadows; box-shadow: $shadows; } @else { $shadows: 0 0 2px rgba(#000,.25); -webkit-box-shadow: $shadow; box-shadow: $shadow; } }

    在实际调用中:

    .box { @include box-shadow(0 0 1px rgba(#000,.5),0 0 2px rgba(#000,.2)); }

    编译出来的CSS:

    .box { -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2); box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2); }

     

     

    scss混合宏的参数--混合宏的不足

    混合宏在实际编码中给我们带来很多方便之处,特别是对于复用重复代码块。但其最大的不足之处是会生成冗余的代码块。比如在不同的地方调用一个相同的混合宏时。如:

    @mixin border-radius{ -webkit-border-radius: 3px; border-radius: 3px; } .box { @include border-radius; margin-bottom: 5px; } .btn { @include border-radius; }

    示例在“.box”和“.btn”中都调用了定义好的“border-radius”混合宏。先来看编译出来的 CSS:

    .box { -webkit-border-radius: 3px; border-radius: 3px; margin-bottom: 5px; } .btn { -webkit-border-radius: 3px; border-radius: 3px; }

     

    上例明显可以看出,scss 在调用相同的混合宏时,并不能智能的将相同的样式代码块合并在一起。这也是scss 的混合宏最不足之处。

     

     

    scss扩展/继承

    继承对于了解 CSS 的同学来说一点都不陌生,先来看一张图:

    新葡亰496net 11

    图中代码显示“.col-sub .block li,.col-extra .block li” 继承了 “.item-list ul li”选择器的 “padding : 0;” 和 “ul li” 选择器中的 “list-style : none outside none;”以及 * 选择器中的 “box-sizing:inherit;”。

    在scss 中也具有继承一说,也是继承类中的样式代码块。在 Sass 中是通过关键词 “@extend”来继承已存在的类样式块,从而实现代码的继承。如下所示:

    //SCSS .btn { border: 1px solid #ccc; padding: 6px 10px; font-size: 14px; } .btn-primary { background-color: #f36; color: #fff; @extend .btn; } .btn-second { background-color: orange; color: #fff; @extend .btn; }

    编译出来之后:

    //CSS .btn, .btn-primary, .btn-second { border: 1px solid #ccc; padding: 6px 10px; font-size: 14px; } .btn-primary { background-color: #f36; color: #fff; } .btn-second { background-clor: orange; color: #fff; }

    从示例代码可以看出,在 Sass 中的继承,可以继承类样式块中所有样式代码,而且编译出来的 CSS 会将选择器合并在一起,形成组合选择器:

    .btn, .btn-primary, .btn-second { border: 1px solid #ccc; padding: 6px 10px; font-size: 14px; }

     

     

    scss占位符 %placeholder

    scss 中的占位符 %placeholder 功能是一个很强大,很实用的一个功能,这也是我非常喜欢的功能。他可以取代以前 CSS 中的基类造成的代码冗余的情形。因为 %placeholder 声明的代码,如果不被 @extend 调用的话,不会产生任何代码。来看一个演示:

    %mt5 { margin-top: 5px; } %pt5{ padding-top: 5px; }

    这段代码没有被 @extend 调用,他并没有产生任何代码块,只是静静的躺在你的某个 SCSS 文件中。只有通过 @extend 调用才会产生代码:

    //SCSS %mt5 { margin-top: 5px; } %pt5{ padding-top: 5px; } .btn { @extend %mt5; @extend %pt5; } .block { @extend %mt5; span { @extend %pt5; } }

    编译出来的CSS

    //CSS .btn, .block { margin-top: 5px; } .btn, .block span { padding-top: 5px; }

    从编译出来的 CSS 代码可以看出,通过 @extend 调用的占位符,编译出来的代码会将相同的代码合并在一起。这也是我们希望看到的效果,也让你的代码变得更为干净。

     

     

    scss混合宏 VS 继承 VS 占位符

    初学者都常常纠结于这个问题“什么时候用混合宏,什么时候用继承,什么时候使用占位符?”其实他们各有各的优点与缺点,先来看看他们使用效果:

    a) scss 中的混合宏使用

    编译出来的 CSS 见右侧结果窗口。

    总结:编译出来的 CSS 清晰告诉了大家,他不会自动合并相同的样式代码,如果在样式文件中调用同一个混合宏,会产生多个对应的样式代码,造成代码的冗余,这也是 CSSer 无法忍受的一件事情。不过他并不是一无事处,他可以传参数。

    个人建议:如果你的代码块中涉及到变量,建议使用混合宏来创建相同的代码块。

    b) scss 中继承

    同样的,将上面代码中的混合宏,使用类名来表示,然后通过继承来调用:

    总结:使用继承后,编译出来的 CSS 会将使用继承的代码块合并到一起,通过组合选择器的方式向大家展现,比如 .mt, .block, .block span, .header, .header span。这样编译出来的代码相对于混合宏来说要干净的多,也是 CSSer 期望看到。但是他不能传变量参数。

    个人建议:如果你的代码块不需要专任何变量参数,而且有一个基类已在文件中存在,那么建议使用scss 的继承。

    c) 占位符

    最后来看占位符,将上面代码中的基类 .mt 换成 scss 的占位符格式:

    总结:编译出来的 CSS 代码和使用继承基本上是相同,只是不会在代码中生成占位符 mt 的选择器。那么占位符和继承的主要区别的,“占位符是独立定义,不调用的时候是不会在 CSS 中产生任何代码;继承是首先有一个基类存在,不管调用与不调用,基类的样式都将会出现在编译出来的 CSS 代码中。”

    来看一个表格:

    新葡亰496net 12

     

     

    scss插值#{}

    使用 CSS 预处理器语言的一个主要原因是想使用 scss 获得一个更好的结构体系。比如说你想写更干净的、高效的和面向对象的 CSS。scss 中的插值(Interpolation)就是重要的一部分。让我们看一下下面的例子:

    $properties: (margin, padding); @mixin set-value($side, $value) { @each $prop in $properties { #{$prop}-#{$side}: $value; } } .login-box { @include set-value(top, 14px); }

    它可以让变量和属性工作的很完美,上面的代码编译成 CSS:

    .login-box { margin-top: 14px; padding-top: 14px; }

    这是 scss 插值中一个简单的实例。当你想设置属性值的时候你可以使用字符串插入进来。另一个有用的用法是构建一个选择器。可以这样使用:

    @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:

    .header-text-small { font-size: 12px; } .header-text-medium { font-size: 20px; } .header-text-big { font-size: 40px; }

    一旦你发现这一点,你就会想到超级酷的 mixins,用来生成代码或者生成另一个 mixins。然而,这并不完全是可能的。第一个限制,这可能会很删除用于 scss 变量的插值。

    $margin-big: 40px; $margin-medium: 20px; $margin-small: 12px; @mixin set-value($size) { margin-top: $margin-#{$size}; } .login-box { @include set-value(big); }

    上面的 scss 代码编译出来,你会得到下面的信息:

    error style.scss (Line 5: Undefined variable: “$margin-".)

    所以,#{}语法并不是随处可用,你也不能在 mixin 中调用:

    @mixin updated-status { margin-top: 20px; background: #F00; } $flag: "status"; .navigation { @include updated-#{$flag}; }

    上面的代码在编译成 CSS 时同样会报错:

    error style.scss (Line 7: Invalid CSS after "...nclude updated-": expected "}", was "#{$flag};")

    幸运的是,可以使用 @extend 中使用插值。例如:

    %updated-status { margin-top: 20px; background: #F00; } .selected-status { font-weight: bold; } $flag: "status"; .navigation { @extend %updated-#{$flag}; @extend .selected-#{$flag}; }

     

    上面的 scss 代码是可以运行的,因为他给了我们力量,可以动态的插入 .class 和 %placeholder。当然他们不能接受像 mixin 这样的参数,上面的代码编译出来的 CSS:

    .navigation { margin-top: 20px; background: #F00; } .selected-status, .navigation { font-weight: bold; }

     

    scss注释

    注释对于一名程序员来说,是极其重要,良好的注释能帮助自己或者别人阅读源码。在 scss 中注释有两种方式,我暂且将其命名为:

    1、类似 CSS 的注释方式,使用 ”/* ”开头,结属使用 ”*/ ”

    2、类似 JavaScript 的注释方式,使用“//”

    两者区别,前者会在编译出来的 CSS 显示,后者在编译出来的 CSS 中不会显示,来看一个示例:

    //定义一个占位符 %mt5 { margin-top: 5px; } /*调用一个占位符*/ .box { @extend %mt5; }

    编译出来的CSS

    .box { margin-top: 5px; } /*调用一个占位符*/

     

     

     

    scss数据类型

     scss 和 JavaScript 语言类似,也具有自己的数据类型,在 Sass 中包含以下几种数据类型:

    •  数字: 如,1、 2、 13、 10px;
    •  字符串:有引号字符串或无引号字符串,如,"foo"、 'bar'、 baz;
    •  颜色:如,blue、 #04a3f9、rgba(255,0,0,0.5);
    •  布尔型:如,true、 false;
    •  空值:如,null;
    •  值列表:用空格或者逗号分开,如,1.5em 1em 0 2em 、 Helvetica, Arial, sans-serif。

     

    SassScript 也支持其他 CSS 属性值(property value),比如 Unicode 范围,或 !important 声明。然而,Sass 不会特殊对待这些属性值,一律视为无引号字符串 (unquoted strings)。

     

     

    scss字符串

    SassScript 支持 CSS 的两种字符串类型:

    • 有引号字符串 (quoted strings),如 "Lucida Grande" 、'
    • 无引号字符串 (unquoted strings),如 sans-serifbold。

    在编译 CSS 文件时不会改变其类型。只有一种情况例外,使用 #{ }插值语句 (interpolation) 时,有引号字符串将被编译为无引号字符串,这样方便了在混合指令 (mixin) 中引用选择器名。

    @mixin firefox-message($selector) { body.firefox #{$selector}:before { content: "Hi, Firefox users!"; } } @include firefox-message(".header");

    编译为:

    body.firefox .header:before { content: "Hi, Firefox users!"; }

    需要注意的是:当 deprecated = property syntax 时 (暂时不理解是怎样的情况),所有的字符串都将被编译为无引号字符串,不论是否使用了引号。

     

     

    scss值列表

    所谓值列表 (lists) 是指 scss 如何处理 CSS 中: 

    margin: 10px 15px 0 0

    或者: 

    font-face: Helvetica, Arial, sans-serif

    像上面这样通过空格或者逗号分隔的一系列的值。

    事实上,独立的值也被视为值列表——只包含一个值的值列表。

    scss列表函数(scss list functions)赋予了值列表更多功能:

    1. nth函数(nth function) 可以直接访问值列表中的某一项;
    2. join函数(join function) 可以将多个值列表连结在一起;
    3. append函数(append function) 可以在值列表中添加值; 
    4. @each规则(@each rule) 则能够给值列表中的每个项目添加样式。

    值列表中可以再包含值列表,比如 1px 2px, 5px 6px 是包含 1px 2px 与 5px 6px 两个值列表的值列表。如果内外两层值列表使用相同的分隔方式,要用圆括号包裹内层,所以也可以写成 (1px 2px) (5px 6px)。当值列表被编译为 CSS 时,scss 不会添加任何圆括号,因为 CSS 不允许这样做。(1px 2px) (5px 6px)与 1px 2px 5px 6px 在编译后的 CSS 文件中是一样的,但是它们在 scss 文件中却有不同的意义,前者是包含两个值列表的值列表,而后者是包含四个值的值列表。

    可以用 () 表示空的列表,这样不可以直接编译成 CSS,比如编译 font-family: ()时,scss 将会报错。如果值列表中包含空的值列表或空值,编译时将清除空值,比如 1px 2px () 3px 或 1px 2px null 3px。

    $linkColor: #08c #333 !default;

    $bdcolor:#c30 #f60;

    a{

    color:nth($linkColor,1);

     

    &:hover{

    color:nth($linkColor,2);

    border-style:dashed;

    border-width:2px;

    border-color:join($linkColor,$bdcolor);

    }

    }

    编译后:

    a {

    color: #08c;

    }

    a:hover {

    color: #333;

    border-style: dashed;

    border-width: 2px;

    border-color: #08c #333 #c30 #f60;

    }

     

     

    scss运算-加法

    程序中的运算是常见的一件事情,但在 CSS 中能做运算的,到目前为止仅有 calc() 函数可行。但在scss 中,运算只是其基本特性之一。在 Sass 中可以做各种数学计算,在接下来的章节中,主要和大家一起探讨有关于 scss 中的数学运算。

    (一)、加法

    加法运算是 Sass 中运算中的一种,在变量或属性中都可以做加法运算。如:

    .box { width: 20px 8in; }

    编译出来的 CSS:

    .box { width: 788px; }

    但对于携带不同类型的单位时,在 Sass 中计算会报错,如下例所示:

    .box { width: 20px 1em; }

    编译的时候,编译器会报错:“Incompatible units: 'em' and ‘px'.”

     

     

     

    scss运算-减法

    scss 的减法运算和加法运算类似,我们通过一个简单的示例来做阐述:

    $full-width: 960px; $sidebar-width: 200px; .content { width: $full-width

    • $sidebar-width; }

    编译出来的 CSS 如下:

    .content { width: 760px; }

    同样的,运算时碰到不同类型的单位时,编译也会报错,如:

    $full-width: 960px; .content { width: $full-width - 1em; }

    编译的时候,编译器报“Incompatible units: 'em' and ‘px’.”错误。

     

     

    scss运算-乘法

    scss 中的乘法运算和前面介绍的加法与减法运算还略有不同。虽然他也能够支持多种单位(比如 em ,px , %),但当一个单位同时声明两个值时会有问题。比如下面的示例:

    .box { width:10px * 2px; }

    编译的时候报“20px*px isn't a valid CSS value.”错误信息。

    如果进行乘法运算时,两个值单位相同时,只需要为一个数值提供单位即可。上面的示例可以修改成:

    .box { width: 10px * 2; }

    编译出来的 CSS:

    .box { width: 20px; }

    Sass 的乘法运算和加法、减法运算一样,在运算中有不同类型的单位时,也将会报错。如下面的示例:

    .box { width: 20px * 2em; }

    编译时报“40em*px isn't a valid CSS value.”错误信息。

     

    scss运算-除法

    scss 的乘法运算规则也适用于除法运算。不过除法运算还有一个特殊之处。众所周知“/”符号在 CSS 中已做为一种符号使用。因此在 scss 中做除法运算时,直接使用“/”符号做为除号时,将不会生效,编译时既得不到我们需要的效果,也不会报错。一起先来看一个简单的示例:

    .box { width: 100px / 2; }

    编译出来的 CSS 如下:

    .box { width: 100px / 2; }

    这样的结果对于大家来说没有任何意义。要修正这个问题,只需要给运算的外面添加一个小括号( )即可:

    .box { width: (100px / 2); }

    编译出来的 CSS 如下:

    .box { width: 50px; }

    除了上面情况带有小括号,“/”符号会当作除法运算符之外,如果“/”符号在已有的数学表达式中时,也会被认作除法符号。如下面示例:

    .box { width: 100px / 2 2in; }

    编译出来的CSS:

    .box { width: 242px; }

    另外,在 scss 除法运算中,当用变量进行除法运算时,“/”符号也会自动被识别成除法,如下例所示:

    $width: 1000px; $nums: 10; .item { width: $width / 10; } .list { width: $width / $nums; }

    编译出来的CSS:

    .item { width: 100px; } .list { width: 100px; }

    综合上述,”/  ”符号被当作除法运算符时有以下几种情况:

    •    如果数值或它的任意部分是存储在一个变量中或是函数的返回值。

    •    如果数值被圆括号包围。

    •    如果数值是另一个数学表达式的一部分。

    如下所示:

    //SCSS p { font: 10px/8px; // 纯 CSS,不是除法运算 $width: 1000px; width: $width/2; // 使用了变量,是除法运算 width: round(1.5)/2; // 使用了函数,是除法运算 height: (500px/2); // 使用了圆括号,是除法运算 margin-left: 5px 8px/2px; // 使用了加( )号,是除法运算 }

    编译出来的CSS

    p { font: 10px/8px; width: 500px; height: 250px; margin-left: 9px; }

     

    scss 的除法运算还有一个情况。我们先回忆一下,在乘法运算时,如果两个值带有相同单位时,做乘法运算时,出来的结果并不是我们需要的结果。但在除法运算时,如果两个值带有相同的单位值时,除法运算之后会得到一个不带单位的数值。如下所示:

    .box { width: (1000px / 100px); }

    编译出来的CSS如下:

    .box { width: 10; }

     

    scss运算-变量计算

    在 scss 中除了可以使用数值进行运算之外,还可以使用变量进行计算,其实在前面章节的示例中也或多或少的向大家展示了。在 scss 中使用变量进行计算,这使得 scss 的数学运算功能变得更加实用。一起来看一个简单的示例:

    $content-width: 720px; $sidebar-width: 220px; $gutter: 20px; .container { width: $content-width $sidebar-width $gutter; margin: 0 auto; }

    编译出来的CSS

    .container { width: 960px; margin: 0 auto; }

     

    scss运算-数字运算

    在 Sass 运算中数字运算是较为常见的,数字运算包括前面介绍的:加法、减法、乘法和除法等运算。而且还可以通过括号来修改他们的运算先后顺序。和我们数学运算是一样的,一起来看个示例。

    .box { width: ((220px 720px) - 11 * 20 ) / 12 ; }

    编译出来的 CSS:

    .box { width: 60px; }

     

    scss运算-颜色运算

    所有算数运算都支持颜色值,并且是分段运算的。也就是说,红、绿和蓝各颜色分段单独进行运算。如:

    p { color: #010203 #040506; }

    计算公式为 01 04 = 05、02 05 = 07 和 03 06 = 09, 并且被合成为:

    如此编译出来的 CSS 为:

    p { color: #050709; }

    算数运算也能将数字和颜色值 一起运算,同样也是分段运算的。如:

    p { color: #010203 * 2; }

    计算公式为 01 * 2 = 02、02 * 2 = 04 和 03 * 2 = 06, 并且被合成为:

    p { color: #020406; }

     

    scss运算-字符运算

    在 Sass 中可以通过加法符号“ ”来对字符串进行连接。例如:

    $content: "Hello" "" "Sass!"; .box:before { content: " #{$content} "; }

    编译出来的CSS:

    .box:before { content: " Hello Sass! "; }

    除了在变量中做字符连接运算之外,还可以直接通过  ,把字符连接在一起:

    div { cursor: e -resize; }

    编译出来的CSS:

    div { cursor: e-resize; }

    注意,如果有引号的字符串被添加了一个没有引号的字符串 (也就是,带引号的字符串在 符号左侧), 结果会是一个有引号的字符串。 同样的,如果一个没有引号的字符串被添加了一个有引号的字符串 (没有引号的字符串在 符号左侧), 结果将是一个没有引号的字符串。

    例如:

    p:before { content: "Foo " Bar; font-family: sans- "serif"; }

    编译出来的 CSS:

    p:before { content: "Foo Bar"; font-family: sans-serif; }

     

     

    本文摘自慕课网课程

    本文由新葡亰496net发布于新葡亰官网,转载请注明出处:新葡亰496net:新手指南,一种CSS预处理器语言

    关键词:

上一篇:爱上因材施教的CSS细节

下一篇:没有了