sass部分知识小结

1、sass安装
因为sass是基于ruby写的，所以首先必须安装ruby。去ruby官网下载安装ruby安装包，在安装过程中，勾选上添加到环境变量，这样可以在安装的时候自动将安装路径添加到环境变量中。
ruby安装成功后，安装sass，在命令行中输入“gem install sass”进行安装。、
2、sass的编译
sass有两种后缀名，一种是以“.sass”结尾的，另一种是以“.scss”结尾的，一般情况下，都是用后者。
将写好的scss文件进行编译，编译方法：可以在命令行中项目目录下输入“sass input.scss output.css ”.
还能实现实时自动编译：“sass --watch inpyt.scss:output.css”

我用的是webstorm编写软件，webstorm是支持sass编译的，用webstorm安装sass的方法可百度，很简单。

3、sass变量
“$”:用来声明变量，例如$blue:blue; 变量可以直接使用，如：“div{color:$blue;}”，编译过后----div{color : blue;}
变量也是有作用域的，分为全局作用域和局部作用域；如下：
$blue:blue; //全局变量
div{
      $blue:blue; //局部变量
      color:$blue;
    }
局部变量只在那一块中起作用，不影响全局变量的定义。也可以将局部变量转换为全局变量，使用“!global”；如div{$blue:red !global; color:$blue;} a{ color: $blue; }
在sass中，变量名的定义既可以使用中划线也可以使用下划线，这两者是互通的，意思就是说，在变量定义的时候使用的是中划线，在引用变量的时候可以使用下划线，即将中划线替换成下划线。
4、嵌套css规则
使用sass可以进行样式的嵌套，使用css，有时候会要重复写很多代码，使用sass嵌套则可以减少很多代码量。例子如下：
  #content {

article {
         h1 { color: #333 }
         p { margin-bottom: 1.4em }
     }
     aside { #EEE }
}
/* 编译后 */
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { 父选择器的标识符&
在sass中，对于简单的嵌套是没问题的，但如果涉及到父选择器中使用伪类的话，简单的嵌套就行不通了，所以现在有个标识符“&” 可以解决这个问题。例如：
article a{
      color：blue ;
      &:hover:red;
    }
//编译过后
     article a { color: blue }
   article a:hover { color: red }
6、群组选择器的嵌套
     像 .button button会命中button元素和类名为.button的元素，这种选择器叫做群组选择器。群组选择器的规则会对群组中任何一个选择器的元素生效。例子如下所示：
    .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}
7、子组合选择器和同层组合选择器：>、+和~；
        这仨个选择器必须配合其他的选择器一起使用，以制定浏览器仅选择某种特定的上下文中的元素。
      “>”选择器：选择一个元素的直接子元素。
      “+”选择器：同层相邻组合选择器，即与一个元素相邻的同一级的兄弟元素。
      “~”选择器：同层全体组合选择器，即与一个元素处于同一级别的所有元素。
各选择器的用法如下所示：
      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 > section{ background: #eee }
     article dl > dt { color: #333 }
     article dl > dd { color: #555 }
     nav + article { margin-top: 0 }
8、属性嵌套
在sass中，除了选择器的嵌套之外，还可以进行属性的嵌套。
属性嵌套的规则是：将属性名从中划线的地方断开，在根属性的后边添加一个冒号：，紧跟一个{}块，然后把子属性的部分写在{}中，例子如下所示;
      nav {
         border: {
         style: solid;
         width: 1px;
         color: #ccc;
         }
     }
    //编译后
    nav { border-style: solid; border-width: 1px; border-color: #ccc;}

属性和选择器的嵌套是非常大的特性，它不仅减少了代码的编写量，而且通过视觉上的缩进使自己编写的样式结构更加清晰，更易于阅读和开发。

9、导入sass文件
     在一个大型的项目中，必定会存在大量的css样式，将这所有的样式放在一起，看起来不美观，所以需要将这些样式拆分到多个文件中，sass可以实现这个功能，通过@import规则进行样式文件的引进。css也有这个规则，只有执行该规则的时候，浏览器才会去下载其他的css文件，这会导致页面在加载的时候会很慢。
为@import命令专门编写的sass文件，不会生成对应的css文件，这样的sass文件被称为局部文件。
sass局部文件一般是以下划线开头，当@import一个局部文件时，不需要将文件的下划线写入，只需要将下划线之后的名字导入即可。
     9.1 默认变量值
      sass中可以使用!default标签来实现这个目的。
9.2 嵌套导入
         和原生的css不同，sass允许@import命令直接写在css规则内。例子如下：
         这是一个名为_blue-theme.scss的局部文件
      aside {

background: blue; color: white;
     }
把该文件导入到一个css规则内，如下所示：
     .blue-theme {@import "blue-theme"}
     //生成的结果跟你直接在.blue-theme选择器内写_blue-theme.scss文件的内容完全一样。
    .blue-theme {
         aside {
             background: blue;
             color: #fff;
         }
     }
9.3 原生的css导入
     以下三种情况，在sass中使用@import命令，导入的时候，也会造成浏览器的额外下载。影响加载速度。
      1.被导入的文件名以.css结尾；
      2.被导入的文件名是一个URL地址（例如：http://www.sass.hk/css/css/css）；
      3.被导入的文件名是css的url()值。
9.4 静默注释
     sass提供了一种不同于css标准注释格式/*.....*/的注释语法，即静默注释3，其注释内容不会出现在生成的css文件中；sass有两种注释方法：
1. /....../ :这种注释方法的注释内容不会出现在相对应生成的css文件中
     2./*......*/: 这种注释方法的注释内容会出现在相对应生成的css文件中
但是当注释出现在不该出现的地方，如css属性或选择器中，这些注释也会被抹掉，如下：
     body {
         color /* 这块注释内容不会出现在生成的css中 */: #333;
     padding: 1; /* 这块注释内容也不会出现在生成的css中 */ 0
     }

保持sass的条理性和可读性的最基本的三个方法：嵌套、导入、注释。

转载于:https://www.cnblogs.com/Shirley-1994/p/7048509.html

sass部分知识小结相关推荐

好程序员分享24个canvas基础知识小结
好程序员分享24个canvas基础知识小结,非常全面详尽,推荐给大家. 现把canvas的知识点总结如下,以便随时查阅. 1.填充矩形 fillRect(x,y,width,height); 2.绘制 ...
unicode 编码转换漏洞_好程序员Python教程之字符串编码知识小结
好程序员Python教程之字符串编码知识小结,提及Python字符串,你会想到什么?是ASCII,还是Unicode?他们之间是如何转换的?字符串编码和字符串有什么区别?接下来好程序员Python教程 ...
Android技能树 — 树基础知识小结(一)
前言: 现在安卓面试,对于数据结构的问题也越来越多了,也经常看到别人发的面试题都是问什么红黑树,二叉树查找等,所以我们虽然不会马上就会各种难的面试题,但起码树的基础知识还是要会的,这样才能去进一步学. ...
python编码转换语句_好程序员Python教程之字符串编码知识小结
好程序员Python教程之字符串编码知识小结,提及Python字符串,你会想到什么?是ASCII,还是Unicode?他们之间是如何转换的?字符串编码和字符串有什么区别?接下来好程序员Python教程 ...
python static 的用法_Python中static相关知识小结
非 static 编译不指定额外参数直接编译 Python: $ ./configure $ make 查看所依赖的共享库: $ ldd python linux-vdso.so.1 => ( ...
好程序员分享24个canvas基础知识小结 1
好程序员分享24个canvas基础知识小结,非常全面详尽,推荐给大家. 现把canvas的知识点总结如下,以便随时查阅. 1.填充矩形 fillRect(x,y,width,height); 2.绘制 ...
C/C++位域知识小结
C/C++位域知识小结几篇较全面的位域相关的文章: http://www.uplook.cn/blog/9/93362/ C/C++位域(Bit-fields)之我见 C中的位域与大小端问题内存对 ...
知识小结------数据分析------Fisher‘s exact test(费希尔检测)
系列知识小结目录 Cox比例风险回归模型(proportional hazards model) Fisher's exact test费希尔检测系列知识小结目录前言一.Fisher's exa ...
推广知识小结（名词篇CPA、CPS、CPC、CPM、CPT、CPD）
推广知识小结(名词篇) 一.CPC 二.CPM 三.CPA 四.CPS 五.CPT 六.CPD 一.CPC CPC,这一种推广模式全称为:Cost Per Click.这一种推广方式是按照点击量来进行 ...

sass部分知识小结

sass部分知识小结相关推荐

最新文章

热门文章