欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

Sass 基础(一)_html/css_WEB-ITnose

程序员文章站 2022-04-13 15:00:17
...
  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;
    }
  }

相关标签: Sass 基础(一)