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;
}
- 还没有人评论，欢迎说说您的想法！
客服
