手记

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;
      }
  • 运算

      $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!";
      }
    • 支持数字的加减乘除、取整等运算。

    • +可用于连接字符串。

    • #{}插值语句可以在选择器或属性名中使用变量。

    • 注意:/ 被视为除法运算符号只有三种情况

  1. 如果值被圆括号包裹

  2. 如果值,或值的一部分,是变量或者函数的返回值

  3. 如果值是算数表达式的一部分



作者:tiancai啊呆
链接:https://www.jianshu.com/p/0738f2d67a18


0人推荐
随时随地看视频
慕课网APP