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

  

  

  

  

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

      因此,所有在CSS 中正常工作的代码也能在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;
        }

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元素。

    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 }

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

  当你@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地址(比如http://www.sass.hk/css/css.css),由此可用谷歌字体API提供的相应服务;
      ● 被导入文件的名字是CSS的url()值。
6.静默注释
  sass 另外提供了一种不同于css 的注释。它以 // 开头,注释内容直到末行。
    body {
      color: #333; // 这种注释内容不会出现在生成的css文件中
      padding: 0; /* 这种注释内容会出现在生成的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;
    }
      //sass最终生成:
    .notice {
      background-color: green;
      border: 2px solid #00aa00;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border-radius: 5px;
    }

  给混合器传参:
    通过在@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
      );
    }

  默认参数值:
      为了在@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 基础——回顾的更多相关文章

  1. [C#] C# 基础回顾 - 匿名方法

    C# 基础回顾 - 匿名方法 目录 简介 匿名方法的参数使用范围 委托示例 简介 在 C# 2.0 之前的版本中,我们创建委托的唯一形式 -- 命名方法. 而 C# 2.0 -- 引进了匿名方法,在 ...

  2. Javascript基础回顾 之(三) 面向对象

    本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...

  3. Javascript基础回顾 之(二) 作用域

    本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...

  4. Javascript基础回顾 之(一) 类型

    本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...

  5. JavaScript 基础回顾——对象

    JavaScript是基于对象的解释性语言,全部数据都是对象.在 JavaScript 中并没有 class 的概念,但是可以通过对象和类的模拟来实现面向对象编程. 1.对象 在JavaScript中 ...

  6. 四、Android学习第四天——JAVA基础回顾(转)

    (转自:http://wenku.baidu.com/view/af39b3164431b90d6c85c72f.html) 四.Android学习第四天——JAVA基础回顾 这才学习Android的 ...

  7. 1、java基础回顾与加强

    一.    基础回顾 1   集合 1.1  集合的类型与各自的特性 ---|Collection: 单列集合 ---|List: 有存储顺序, 可重复 ---|ArrayList:    数组实现, ...

  8. C#基础回顾:正则表达式

    C#基础回顾:正则表达式 写在前面:本文根据笔者的学习体会结合相关书籍资料对正则表达式的语法和使用(C#)进行基本的介绍.适用于初学者. 摘要:正则表达式(Regular Expressions),相 ...

  9. [转]前端利器:SASS基础与Compass入门

    [转]前端利器:SASS基础与Compass入门 SASS是Syntactically Awesome Stylesheete Sass的缩写,它是css的一个开发工具,提供了很多便利和简单的语法,让 ...

随机推荐

  1. Linux中cat、more、less、tail、head命令的区别

    一.cat 显示文件连接文件内容的工具 cat 是一个文本文件(查看)和(连接)工具,通常与more搭配使用,与more不同的是cat可以合并文件.查看一个文件的内容,用cat比较简单,就是cat后面 ...

  2. Apache处理请求步骤及过程

    Apache请求处理循环详解 : 1.Post-Read-Request阶段: 在正常请求处理流程中,这是模块可以插入钩子的第一个阶段.对于那些想很早进入处理请求的模块来说,这个阶段可以被利用. 2. ...

  3. [Lua]Lua入门教程

    什么是Lua Lua 是一个小巧的脚本语言.是巴西里约热内卢天主教大学(Pontifical Catholic University of Rio de Janeiro)里的一个研究小组,由Rober ...

  4. 你会做Web上的用户登录功能吗?

    Web上的用户登录功能应该是最基本的功能了,可是在我看过一些站点的用户登录功能后,我觉得很有必要写一篇文章教大家怎么来做用户登录功能.下面的文章告诉大家这个功能可能并没有你所想像的那么简单,这是一个关 ...

  5. iOS常用的第三方库GitHub地址

    MJRefresh https://github.com/CoderMJLee/MJRefresh#期待 Facebook-POP https://github.com/facebook/pop /* ...

  6. 一种新的隐藏-显示模式诞生——css3的scale(0)到scale(1)

    .dropdown-menu {  background: rgba(255, 255, 255, 0.98) none repeat scroll 0 0;  box-shadow: 0 1px 2 ...

  7. 3)Java学习笔记:内部类

    什么是内部类 内部类是指在一个外部类的内部再定义一个类.内部类作为外部类的一个成员,并且依附于外部类而存在的.内部类可为静态,可用protected和private修饰(而外部类只能使用public和 ...

  8. Django中扩展Paginator实现分页

    Reference:https://my.oschina.net/kelvinfang/blog/134342 Django中已经实现了很多功能,基本上只要我们需要的功能,都能够找到相应的包.要在Dj ...

  9. pku2104

    传送门:http://poj.org/problem?id=2104 题目大意:给定一个长度为N的数组{A[i]},你的任务是解决Q个询问.每次询问在A[l], A[l+1], ...... , A[ ...

  10. django的HTTPREQUEST对象

    Django使用request和response对象 当请求一张页面时,Django把请求的metadata数据包装成一个HttpRequest对象,然后Django加载合适的view方法,把这个Ht ...