sass初探

Sass 是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能,这些拓展令 CSS 更加强大与优雅。使用 Sass有助于更好地组织管理样式文件,以及更高效地开发项目。

  • 变量
    sass使用$符号来标识变量,你可以把反复使用的css属性值定义成变量,然后通过变量名来引用它们,而无需重复书写这一属性值,这对于维护来说很方便,只需修改一处即可。
    sass源文件
      $highlight-color: #f90 !default;  // !default表示变量默认值
      $highlight-border: 1px solid $highlight-color;
      .selected {
        border: $highlight-border;
      }
    

    编译之后的css

      .selected {
        border: 1px solid #f90;
      }
    
  • 嵌套
    sass 允许将一套css样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器。&代表父选择器。
    sass源文件
      #content {
        article {
          h1 {
            color: #333;
          }
          p {
            margin-bottom: 1.4em;
          }
        }
        aside {
          background-color: #eee;
        }
    
      article a {
        color: blue;
        &:hover {
          color: red;
        }
      }
      
    

    编译之后的css

      #content article h1 {
        color: #333;
      }
    
      #content article p {
        margin-bottom: 1.4em;
      }
    
      #content aside {
        background-color: #eee;
      }
    
      article a {
        color: blue;
      }
      article a:hover {
        color: red;
      }
    
  • 混合器
    sass的混合器实现大段样式的重用,混合器使用@mixin标识符定义。然后就可以在你的样式表中通过@include来使用这个混合器,放在你希望的任何地方。
    sass源文件
      @mixin rounded-corners {
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
      }
      notice {
        background-color: green;
        border: 2px solid #00aa00;
        @include rounded-corners;
      }
    

    编译之后的css

      notice {
        background-color: green;
        border: 2px solid #00aa00;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
      }
    
  • 继承
    sass使用@extend来实现继承。@extend背后最基本的想法是,如果.seriousError @extend .error, 那么样式表中的任何一处.error都用.error ,.seriousError这一选择器组进行替换。
    sass源文件
      .error {
        border: 1px solid red;
        background-color: #fdd;
      }
      .error a {
        color: red;
        font-weight: 100;
      }
      .seriousError {
        @extend .error;
        border-width: 3px;
      }
    

    编译之后的css

      .error,
      .seriousError {
        border: 1px solid red;
        background-color: #fdd;
      }
    
      .error a,
      .seriousError a {
        color: red;
        font-weight: 100;
      }
    
      .seriousError {
        border-width: 3px;
      }
    
  • 注释
      body {
        color: #333; // 这种注释内容不会出现在生成的css文件中
        padding: 0; /* 这种注释内容会出现在生成的css文件中 */
      }
    

    编译之后的css

      body {
        color: #333;
        padding: 0;
        /* 这种注释内容会出现在生成的css文件中 */
      }
    
  • 导入
    sass也有一个@import规则,那些专门为@import命令而编写的sass文件,并不需要生成对应的独立css文件,这样的sass文件称为局部文件。sass局部文件的文件名以下划线开头。当你@import一个局部文件时,还可以不写文件的全名,即省略文件名开头的下划线。
    //2.scss
      .center {
        text-align: center;
      }
      //1.scss
      @import "2";
    

    编译之后的css

      .center {
        text-align: center;
      }
    
  • 后缀
    sass 有两种后缀名文件:一种后缀名为 sass,不使用大括号和分号;另一种就是我们这里使用的 scss 文件,使用大括号和分号。建议使用后缀名为 scss 的文件。
  • 函数
    使用@function定义函数,可以含有多条语句,需要调用 @return 输出结果。建议在自定义函数前添加前缀避免命名冲突。
      @function c_pxToem($px) {
        @return $px/16px + em;
      }
      .title {
        width: c_pxToem(32px);
      }
    

    编译之后的css

      .title {
        width: 2em;
      }
    
  • 运算
    • 支持数字的加减乘除、取整等运算。
    • +可用于连接字符串。
    • #{}插值语句可以在选择器或属性名中使用变量。
    • 注意:/ 被视为除法运算符号只有三种情况
      1. 如果值被圆括号包裹
      2. 如果值,或值的一部分,是变量或者函数的返回值
      3. 如果值是算数表达式的一部分
      $border: 2px;
      .title {
        height: 20px + 10px;
        width: 100px - 50px;
        line-height: 15 * 2px;
        padding: 10px / (2);
        margin: 5px + 10px/2;
        border: $border/2 solid red;
      }
      p:before {
        content: "Foo " + Bar;
        font-family: sans- + "serif";
      }
      p:after {
        content: "I ate #{$border} pies!";
      }
    

    编译之后的css

      .title {
        height: 30px;
        width: 50px;
        line-height: 30px;
        padding: 5px;
        margin: 10px;
        border: 1px solid red;
      }
    
      p:before {
        content: "Foo Bar";
        font-family: sans-serif;
      }
    
      p:after {
        content: "I ate 2px pies!";
      }
    
    原文作者:tiancai啊呆
    原文地址: https://www.jianshu.com/p/0738f2d67a18
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞