你的位置:首页 > 网页设计

[网页设计]Sass 基础(一)


  css 是一些非常简单得语句的组合,既然简单的语句,就不可避免的有很多重复的,冗余的东西,而且没有传统
编程语言变量,控制语句等高级特性,所以造成了css 编写低效,往往需要查找替换,大量复制来修改或者编写。Sass 是用
弥补这些缺陷的,使开发更加的方便快捷,更加方便管理。
  1.Sass和SCSS的区别。
    文件扩展名不同,Sass 是以“.sass”后缀为扩展名,而 SCSS 是以“.scss”后缀为扩展名
    语法书写方式不同,Sass 是以严格的缩进式语法规则来书写,不带大括号({})和分号(;),而
  SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。
    例如:Sass语法
      $font-stack: Helvetica, sans-serif //定义变量
      $primary-color: #333 //定义变量

      body
        font: 100% $font-stack
        color: $primary-color
    例如:SCSS语法
        $font-stack: Helvetica, sans-serif;
        $primary-color: #333;
    body {
      font: 100% $font-stack;
      color: $primary-color;
    }
   编译出来的 CSS
    body {
      font: 100% Helvetica, sans-serif;
      color: #333;
    }

在使用的页面时依然引用.css文件。
Sass中编译出来的样式风格可以按不同的样式风格显示。
  1.嵌套输出方式nested
    例如: nav {
          ul {
            margin: 0;
            padding: 0;
            list-style: none;
          }
          li { display: inline-block; }
          a {
            display: block;
            padding: 6px 12px;
            text-decoration: none;
           }
        }
    编译出来的风格:nav ul {
              margin: 0;
              padding: 0;
              list-style: none; }
            nav li {
              display: inline-block; }
            nav a {
              display: block;
              padding: 6px 12px;
              text-decoration: none; }
    2.展开输出方式expanded
        例如: nav {
              ul {
                margin: 0;
                padding: 0;
                list-style: none;
                }
          li { display: inline-block; }
          a {
            display: block;
            padding: 6px 12px;
            text-decoration: none;
            }
          }
      编译出来的风格:
        nav ul {
            margin: 0;
            padding: 0;
            list-style: none;
          }
        nav li {
          display: inline-block;
        }
        nav a {
          display: block;
          padding: 6px 12px;
          text-decoration: none;
        }
    3.紧凑输出方式 compact
      例如: nav {
            ul {
                margin: 0;
                padding: 0;
                list-style: none;
          }
        li { display: inline-block; }
        a {
          display: block;
          padding: 6px 12px;
          text-decoration: none;
          }
        }
    编译出来的风格:
      nav ul { margin: 0; padding: 0; list-style: none; }
      nav li { display: inline-block; }
      nav a { display: block; padding: 6px 12px; text-decoration: none; }
  4.压缩输出方式compressed
    例如: nav {
          ul {
            margin: 0;
            padding: 0;
            list-style: none;
            }
          li { display: inline-block; }
          a {
            display: block;
            padding: 6px 12px;
            text-decoration: none;
            }
        }
  编译出来的风格:
      nav ul{margin:0;padding:0;list-style:none}nav li{display:inline-block}nav a{display:block;padding:6px 12px;
          text-decoration:none}
  声明变量用“$”开头,
      $width:300px;
      "$":变量声明符
      width: 变量名称
      300px 变量值
  全局变量与局部变量
    在选择器、函数、混合宏...的外面定义的变量为全局变量
      例如:
        .block {
            color: $color;//调用全局变量
          }
        em {
            $color: red;//定义局部变量
        a {
            color: $color;//调用局部变量
          }
        }
      span {
        color: $color;//调用全局变量
      }
    编译后:
      //CSS
        .block {
            color: orange;
          }
        em a {
          color: red;
          }
       span {
        color: orange;
        }

      $color 就是一个全局变量,而定义在元素内部的变量,比如 $color:red; 是一个局部变量。
      什么时候声明变量?
          1.该值至少重复出现了两次;
          2.该值至少可能会被更新一次;
          3.该值所有的表现都与变量有关(非巧合)。
      Sass 的嵌套分为三种:
        选择器嵌套
        属性嵌套
        伪类嵌套
      例如:在css 会这样写
        nav a {
            color:red;
          }
      header nav a {
          color:green;
      }
    在sass中
    nav {
      a {
        color: red;
       header & {
      color:green;
      }
  嵌套-属性嵌套
  Sass中提供属性嵌套,css有一些属性前缀相同。
  例如用到的样式:
  .box{
    border-top:1px solid red;
    border-bottom:1px solid green;
  }
  在Sass中我们可以这样写:
  .box {
    border: {
    top: 1px solid red;
    bottom: 1px solid green;
    }
  }