前端之Sass/Scss实战笔记-守望者-AIR技术交流

破晓发表于 2016-8-4 14:07:14

前端之Sass/Scss实战笔记

<div class="article_meta" style="color: rgb(153, 153, 153); padding-bottom: 5px; border-bottom-width: 1px; border-bottom-style: dashed; border-bottom-color: rgb(211, 211, 211);"><div class="source">原文  <a class="cut cut70" href="http://segmentfault.com/a/1190000003742313?utm_source=tuicool&utm_medium=referral" style="color: rgb(51, 51, 51); text-decoration: none; transition: 0.25s; outline: none 0px; overflow: hidden; white-space: nowrap; word-break: keep-all; text-overflow: ellipsis; max-width: 69%; display: inline-block;">http://segmentfault.com/a/1190000003742313</a></div><div>主题 <a href="http://www.tuicool.com/topics/11060038" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; transition: 0.25s; outline: none 0px;"><span class="new-label" style="display: inline-block; padding: 2px 4px; font-size: 0.9em; line-height: 16px; vertical-align: baseline; white-space: nowrap; color: rgb(120, 120, 120); margin-right: 5px; background-color: rgb(242, 242, 242);">Sass</a></div></div><div class="article_body" id="nei" style="padding: 20px 5px 25px; overflow-x: hidden; word-break: break-all; min-height: 340px; font-size: 16px; line-height: 1.7em;"><div style="line-height: 1.7em;"><h2 style="margin-bottom: 0.5em; font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; line-height: 1.6em; color: rgb(51, 51, 51); text-rendering: optimizeLegibility; font-size: 18px; text-indent: 1em; background-color: rgb(254, 254, 254);">Introduction</h2><p style="margin-bottom: 0.75em; line-height: 27.2px; text-indent: 1em; color: rgb(51, 51, 51); font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; background-color: rgb(254, 254, 254);">Sass 有两种语法规则(syntaxes),目前新的语法规则（从 Sass 3开始）被称为 “SCSS”( 时髦的css（Sassy CSS）),它是css3语法的的拓展级，就是说每一个语法正确的CSS3文件也是合法的SCSS文件，SCSS文件使用.scss作为拓展名。第二种语法别成为缩进语法（或者 Sass），它受到了Haml的简洁精炼的启发，它是为了人们可以用和css相近的但是更精简的方式来书写css而诞生的。它没有括号，分号，它使用行缩进的方式来指定css 块，虽然sass不是最原始的语法，但是缩进语法将继续被支持，在缩进语法的文件以 .sass 为拓展名。<h2 style="margin-bottom: 0.5em; font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; line-height: 1.6em; color: rgb(51, 51, 51); text-rendering: optimizeLegibility; font-size: 18px; text-indent: 1em; background-color: rgb(254, 254, 254);">注释</h2><p style="margin-bottom: 0.75em; line-height: 27.2px; text-indent: 1em; color: rgb(51, 51, 51); font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; background-color: rgb(254, 254, 254);">有三种形式：<p style="margin-bottom: 0.75em; line-height: 27.2px; text-indent: 1em; color: rgb(51, 51, 51); font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; background-color: rgb(254, 254, 254);">（1）//comment：该注释只是在.scss源文件中有，编译后的css文件中没有。<p style="margin-bottom: 0.75em; line-height: 27.2px; text-indent: 1em; color: rgb(51, 51, 51); font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; background-color: rgb(254, 254, 254);">（2）/ ! /：重要注释，任何style的css文件中都会有，一般放置css文件版权说明等信息。<p style="margin-bottom: 0.75em; line-height: 27.2px; text-indent: 1em; color: rgb(51, 51, 51); font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; background-color: rgb(254, 254, 254);">（3）/ /：该注释在compressed的style的css中没有，其他style的css文件都会含有。<h2 style="margin-bottom: 0.5em; font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; line-height: 1.6em; color: rgb(51, 51, 51); text-rendering: optimizeLegibility; font-size: 18px; text-indent: 1em; background-color: rgb(254, 254, 254);">Quick Start</h2><h3 style="margin-bottom: 0.5em; font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; line-height: 1.6em; color: rgb(51, 51, 51); text-rendering: optimizeLegibility; font-size: 18px; text-indent: 1em; background-color: rgb(254, 254, 254);">Installation</h3><h3 style="margin-bottom: 0.5em; font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; line-height: 1.6em; color: rgb(51, 51, 51); text-rendering: optimizeLegibility; font-size: 18px; text-indent: 1em; background-color: rgb(254, 254, 254);">Build</h3><h4 style="margin-bottom: 0.5em; font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; line-height: 27.2px; color: rgb(51, 51, 51); text-rendering: optimizeLegibility; text-indent: 1em; background-color: rgb(254, 254, 254);">1.切换到.scss文件所在目录</h4><p style="margin-bottom: 0.75em; line-height: 27.2px; text-indent: 1em; color: rgb(51, 51, 51); font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; background-color: rgb(254, 254, 254);">命令行下切换到代码文件夹目录（如Z:\），假设有文件test.scss文件，里面内容如下：（SASS完全支持css语法）<pre class="css" style="padding: 0.3em; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; color: rgb(51, 51, 51); border-radius: 4px; margin-bottom: 0.75em; font-size: 12px; line-height: 1.5em; word-break: break-all; white-space: pre-wrap; border: 1px solid rgba(0, 0, 0, 0.14902); overflow-y: auto; background-color: rgb(246, 246, 246);"><code style="padding: 0.3em; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; border-radius: 3px; border: 0px; display: block; overflow-y: auto;">h1{
font-size:17px;
}
h2{
font-size:18px;
}</code></pre><h4 style="margin-bottom: 0.5em; font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; line-height: 27.2px; color: rgb(51, 51, 51); text-rendering: optimizeLegibility; text-indent: 1em; background-color: rgb(254, 254, 254);">2.编译scss文件为css文件</h4><p style="margin-bottom: 0.75em; line-height: 27.2px; text-indent: 1em; color: rgb(51, 51, 51); font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; background-color: rgb(254, 254, 254);">运行命令：sass --style compressed test.scss test.css，即可生成压缩版的css文件，并且命名为test.css。几点说明：<p style="margin-bottom: 0.75em; line-height: 27.2px; text-indent: 1em; color: rgb(51, 51, 51); font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; background-color: rgb(254, 254, 254);">（1）--style 后面可以有四个参数可选，分别为expanded、nested、compact、compressed，分别选用不同参数的效果可以自己尝试体验。<p style="margin-bottom: 0.75em; line-height: 27.2px; text-indent: 1em; color: rgb(51, 51, 51); font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; background-color: rgb(254, 254, 254);">（2）test.scss和test.css文件目录可以自定义，例如把Z盘sass目录下的test.scss文件编译为压缩版的文件，并放置在Z盘css目录下，那么命令即：sass --style compressed z:\sass\test.scss z:\css\test.css<p style="margin-bottom: 0.75em; line-height: 27.2px; text-indent: 1em; color: rgb(51, 51, 51); font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; background-color: rgb(254, 254, 254);">（3）开发过程中，只需要修改scss文件，然后编译；前端页面只需要引用相应的css文件即可。<h4 style="margin-bottom: 0.5em; font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; line-height: 27.2px; color: rgb(51, 51, 51); text-rendering: optimizeLegibility; text-indent: 1em; background-color: rgb(254, 254, 254);">3.侦听文件和文件夹</h4><p style="margin-bottom: 0.75em; line-height: 27.2px; text-indent: 1em; color: rgb(51, 51, 51); font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; background-color: rgb(254, 254, 254);">如果希望某一个scss文件或者相应的文件夹下面文件修改后，自动进行编译，那么可以使用侦听命令。<p style="margin-bottom: 0.75em; line-height: 27.2px; text-indent: 1em; color: rgb(51, 51, 51); font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; background-color: rgb(254, 254, 254);">（1）侦听文件：<p style="margin-bottom: 0.75em; line-height: 27.2px; text-indent: 1em; color: rgb(51, 51, 51); font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; background-color: rgb(254, 254, 254);">sass --watch --style compressed test.scss:test.css<p style="margin-bottom: 0.75em; line-height: 27.2px; text-indent: 1em; color: rgb(51, 51, 51); font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; background-color: rgb(254, 254, 254);">当test.scss文件有修改后，会自动编译为test.css，并且是compressed的。<p style="margin-bottom: 0.75em; line-height: 27.2px; text-indent: 1em; color: rgb(51, 51, 51); font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; background-color: rgb(254, 254, 254);">（2）侦听文件夹：<p style="margin-bottom: 0.75em; line-height: 27.2px; text-indent: 1em; color: rgb(51, 51, 51); font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; background-color: rgb(254, 254, 254);">sass --watch --style compressed sass:css<p style="margin-bottom: 0.75em; line-height: 27.2px; text-indent: 1em; color: rgb(51, 51, 51); font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; background-color: rgb(254, 254, 254);">当sass文件夹下.scss文件有修改的时候，会自动编译为与sass中文件同名的css文件。<h4 style="margin-bottom: 0.5em; font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; line-height: 27.2px; color: rgb(51, 51, 51); text-rendering: optimizeLegibility; text-indent: 1em; background-color: rgb(254, 254, 254);">备注：</h4><p style="margin-bottom: 0.75em; line-height: 27.2px; text-indent: 1em; color: rgb(51, 51, 51); font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; background-color: rgb(254, 254, 254);">（1）注意源文件和目标文件之间是 冒号 ，与编译命令中为空格不同。<p style="margin-bottom: 0.75em; line-height: 27.2px; text-indent: 1em; color: rgb(51, 51, 51); font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; background-color: rgb(254, 254, 254);">（2）生成的map文件可以查找source map文件的作用。<h3 style="margin-bottom: 0.5em; font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; line-height: 1.6em; color: rgb(51, 51, 51); text-rendering: optimizeLegibility; font-size: 18px; text-indent: 1em; background-color: rgb(254, 254, 254);">Webpack</h3><p style="margin-bottom: 0.75em; line-height: 27.2px; text-indent: 1em; color: rgb(51, 51, 51); font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; background-color: rgb(254, 254, 254);">Webpack中也内置了sass-loader，通过简单的配置既可以使用。不过需要注意的是，Webpack的sass-loader还是依赖于node-sass以及sass(gem)，所以如果安装sass-loader报错可以先尝试安装sass。<h2 style="margin-bottom: 0.5em; font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; line-height: 1.6em; color: rgb(51, 51, 51); text-rendering: optimizeLegibility; font-size: 18px; text-indent: 1em; background-color: rgb(254, 254, 254);">变量与选择器</h2><h2 style="margin-bottom: 0.5em; font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; line-height: 1.6em; color: rgb(51, 51, 51); text-rendering: optimizeLegibility; font-size: 18px; text-indent: 1em; background-color: rgb(254, 254, 254);">变量</h2><h3 style="margin-bottom: 0.5em; font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; line-height: 1.6em; color: rgb(51, 51, 51); text-rendering: optimizeLegibility; font-size: 18px; text-indent: 1em; background-color: rgb(254, 254, 254);">定义</h3><p style="margin-bottom: 0.75em; line-height: 27.2px; text-indent: 1em; color: rgb(51, 51, 51); font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; background-color: rgb(254, 254, 254);">变量的定义一般以$开头，某个变量的作用域仅限于他们定义的层级以及子层级。如果变量是定义在所有嵌套选择器之外的，那么他们可以在各处被调用。<pre class="css" style="padding: 0.3em; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; color: rgb(51, 51, 51); border-radius: 4px; margin-bottom: 0.75em; font-size: 12px; line-height: 1.5em; word-break: break-all; white-space: pre-wrap; border: 1px solid rgba(0, 0, 0, 0.14902); overflow-y: auto; background-color: rgb(246, 246, 246);"><code style="padding: 0.3em; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; border-radius: 3px; border: 0px; display: block; overflow-y: auto;">$color1:#aeaeae;
.div1{
background-color:$color1;
}</code></pre><p style="margin-bottom: 0.75em; line-height: 27.2px; text-indent: 1em; color: rgb(51, 51, 51); font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; background-color: rgb(254, 254, 254);">编译后：<pre class="prettyprint css" style="padding: 0.3em; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; color: rgb(51, 51, 51); border-radius: 4px; margin-bottom: 1.5em; font-size: 12px; line-height: 1.5em; word-break: break-all; white-space: pre-wrap; border: 1px solid rgba(0, 0, 0, 0.14902); overflow-y: auto; background-color: rgb(246, 246, 246);"><code style="padding: 0.3em; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; border-radius: 3px; border: 0px; display: block; overflow-y: auto;">.div1 {
background-color: #aeaeae;
}
/*# sourceMappingURL=test.css.map */</code></pre><p style="margin-bottom: 0.75em; line-height: 27.2px; text-indent: 1em; color: rgb(51, 51, 51); font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; background-color: rgb(254, 254, 254);">如果希望某个在子选择器中定义的变量能够成为全局变量，可以使用!global关键字：<pre class="prettyprint css" style="padding: 0.3em; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; color: rgb(51, 51, 51); border-radius: 4px; margin-bottom: 1.5em; font-size: 12px; line-height: 1.5em; word-break: break-all; white-space: pre-wrap; border: 1px solid rgba(0, 0, 0, 0.14902); overflow-y: auto; background-color: rgb(246, 246, 246);"><code style="padding: 0.3em; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; border-radius: 3px; border: 0px; display: block; overflow-y: auto;">#main {
$width: 5em !global;
width: $width;
}

#sidebar {
width: $width;
}</code></pre><h3 style="margin-bottom: 0.5em; font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; line-height: 1.6em; color: rgb(51, 51, 51); text-rendering: optimizeLegibility; font-size: 18px; text-indent: 1em; background-color: rgb(254, 254, 254);">嵌套引用</h3><p style="margin-bottom: 0.75em; line-height: 27.2px; text-indent: 1em; color: rgb(51, 51, 51); font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; background-color: rgb(254, 254, 254);">嵌套引用在其他编程语言中即是字符串插值，需要用#{}进行包裹：<pre class="ruby" style="padding: 0.3em; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; color: rgb(51, 51, 51); border-radius: 4px; margin-bottom: 0.75em; font-size: 12px; line-height: 1.5em; word-break: break-all; white-space: pre-wrap; border: 1px solid rgba(0, 0, 0, 0.14902); overflow-y: auto; background-color: rgb(246, 246, 246);"><code style="padding: 0.3em; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; border-radius: 3px; border: 0px; display: block; overflow-y: auto;">$left:left;
.div1{
border-#{$left}-width:5px;
}</code></pre><h3 style="margin-bottom: 0.5em; font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; line-height: 1.6em; color: rgb(51, 51, 51); text-rendering: optimizeLegibility; font-size: 18px; text-indent: 1em; background-color: rgb(254, 254, 254);">变量计算</h3><p style="margin-bottom: 0.75em; line-height: 27.2px; text-indent: 1em; color: rgb(51, 51, 51); font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; background-color: rgb(254, 254, 254);">Sass中也是支持对于变量进行简单的计算：<pre class="css" style="padding: 0.3em; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; color: rgb(51, 51, 51); border-radius: 4px; margin-bottom: 0.75em; font-size: 12px; line-height: 1.5em; word-break: break-all; white-space: pre-wrap; border: 1px solid rgba(0, 0, 0, 0.14902); overflow-y: auto; background-color: rgb(246, 246, 246);"><code style="padding: 0.3em; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; border-radius: 3px; border: 0px; display: block; overflow-y: auto;">$left:20px;
.div1{
margin-left:$left+12px;
}</code></pre><p style="margin-bottom: 0.75em; line-height: 27.2px; text-indent: 1em; color: rgb(51, 51, 51); font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; background-color: rgb(254, 254, 254);">变量可以支持计算的类型，还是比较多的：<pre class="prettyprint ruby" style="padding: 0.3em; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; color: rgb(51, 51, 51); border-radius: 4px; margin-bottom: 1.5em; font-size: 12px; line-height: 1.5em; word-break: break-all; white-space: pre-wrap; border: 1px solid rgba(0, 0, 0, 0.14902); overflow-y: auto; background-color: rgb(246, 246, 246);"><code style="padding: 0.3em; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; border-radius: 3px; border: 0px; display: block; overflow-y: auto;">p {
font: 10px/8px; // Plain CSS, no division
$width: 1000px;
width: $width/2; // Uses a variable, does division
width: round(1.5)/2; // Uses a function, does division
height: (500px/2); // Uses parentheses, does division
margin-left: 5px + 8px/2px; // Uses +, does division
font: (italic bold 10px/8px); // In a list, parentheses don't count
}</code></pre><h2 style="margin-bottom: 0.5em; font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; line-height: 1.6em; color: rgb(51, 51, 51); text-rendering: optimizeLegibility; font-size: 18px; text-indent: 1em; background-color: rgb(254, 254, 254);">选择器</h2><h3 style="margin-bottom: 0.5em; font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; line-height: 1.6em; color: rgb(51, 51, 51); text-rendering: optimizeLegibility; font-size: 18px; text-indent: 1em; background-color: rgb(254, 254, 254);">嵌套</h3><pre class="undefined" style="padding: 0.3em; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; color: rgb(51, 51, 51); border-radius: 4px; margin-bottom: 0.75em; font-size: 12px; line-height: 1.5em; word-break: break-all; white-space: pre-wrap; border: 1px solid rgba(0, 0, 0, 0.14902); overflow-y: auto; background-color: rgb(246, 246, 246);"><code style="padding: 0.3em; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; border-radius: 3px; border: 0px; display: block; overflow-y: auto;">.div1{
.span1{
 height: 12px;
}
.div2{
 width: 16px;
}
}</code></pre><p style="margin-bottom: 0.75em; line-height: 27.2px; text-indent: 1em; color: rgb(51, 51, 51); font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; background-color: rgb(254, 254, 254);">属性也可以嵌套，比如border-color属性，可以写成：<pre class="css" style="padding: 0.3em; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; color: rgb(51, 51, 51); border-radius: 4px; margin-bottom: 0.75em; font-size: 12px; line-height: 1.5em; word-break: break-all; white-space: pre-wrap; border: 1px solid rgba(0, 0, 0, 0.14902); overflow-y: auto; background-color: rgb(246, 246, 246);"><code style="padding: 0.3em; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; border-radius: 3px; border: 0px; display: block; overflow-y: auto;">p {
border: {
 color: red;
}
}</code></pre><p style="margin-bottom: 0.75em; line-height: 27.2px; text-indent: 1em; color: rgb(51, 51, 51); font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; background-color: rgb(254, 254, 254);">注意，border后面必须加上冒号。<h3 style="margin-bottom: 0.5em; font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; line-height: 1.6em; color: rgb(51, 51, 51); text-rendering: optimizeLegibility; font-size: 18px; text-indent: 1em; background-color: rgb(254, 254, 254);">父元素引用</h3><p style="margin-bottom: 0.75em; line-height: 27.2px; text-indent: 1em; color: rgb(51, 51, 51); font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; background-color: rgb(254, 254, 254);">在嵌套的子层级中，允许使用&引用父元素：<pre class="ruby" style="padding: 0.3em; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; color: rgb(51, 51, 51); border-radius: 4px; margin-bottom: 0.75em; font-size: 12px; line-height: 1.5em; word-break: break-all; white-space: pre-wrap; border: 1px solid rgba(0, 0, 0, 0.14902); overflow-y: auto; background-color: rgb(246, 246, 246);"><code style="padding: 0.3em; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; border-radius: 3px; border: 0px; display: block; overflow-y: auto;">.div1{
&:hover{
 cursor: hand;
}
}</code></pre><h2 style="margin-bottom: 0.5em; font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; line-height: 1.6em; color: rgb(51, 51, 51); text-rendering: optimizeLegibility; font-size: 18px; text-indent: 1em; background-color: rgb(254, 254, 254);">代码重用</h2><h2 style="margin-bottom: 0.5em; font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; line-height: 1.6em; color: rgb(51, 51, 51); text-rendering: optimizeLegibility; font-size: 18px; text-indent: 1em; background-color: rgb(254, 254, 254);">继承</h2><p style="margin-bottom: 0.75em; line-height: 27.2px; text-indent: 1em; color: rgb(51, 51, 51); font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; background-color: rgb(254, 254, 254);">SASS允许一个选择器，继承另一个选择器。比如，现有class1：<pre class="prettyprint ruby" style="padding: 0.3em; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; color: rgb(51, 51, 51); border-radius: 4px; margin-bottom: 1.5em; font-size: 12px; line-height: 1.5em; word-break: break-all; white-space: pre-wrap; border: 1px solid rgba(0, 0, 0, 0.14902); overflow-y: auto; background-color: rgb(246, 246, 246);"><code style="padding: 0.3em; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; border-radius: 3px; border: 0px; display: block; overflow-y: auto;">.class1{
font-size:19px;
}
.class2{
@extend .class1;
color:black;
}</code></pre><h4 style="margin-bottom: 0.5em; font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; line-height: 27.2px; color: rgb(51, 51, 51); text-rendering: optimizeLegibility; text-indent: 1em; background-color: rgb(254, 254, 254);">注意：如果在class2后面有设置了class1的属性，那么也会影响class2，如下：</h4><pre class="prettyprint ruby" style="padding: 0.3em; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; color: rgb(51, 51, 51); border-radius: 4px; margin-bottom: 1.5em; font-size: 12px; line-height: 1.5em; word-break: break-all; white-space: pre-wrap; border: 1px solid rgba(0, 0, 0, 0.14902); overflow-y: auto; background-color: rgb(246, 246, 246);"><code style="padding: 0.3em; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; border-radius: 3px; border: 0px; display: block; overflow-y: auto;">.class1{
font-size:19px;
}
.class2{
@extend .class1;
color:black;
}
.class1{
font-weight:bold;
}</code>
</pre><p style="margin-bottom: 0.75em; line-height: 27.2px; text-indent: 1em; color: rgb(51, 51, 51); font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; background-color: rgb(254, 254, 254);">由此可以看出Scss也是递归编译的。<h2 style="margin-bottom: 0.5em; font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; line-height: 1.6em; color: rgb(51, 51, 51); text-rendering: optimizeLegibility; font-size: 18px; text-indent: 1em; background-color: rgb(254, 254, 254);">引用外部css文件（Partials）</h2><p style="margin-bottom: 0.75em; line-height: 27.2px; text-indent: 1em; color: rgb(51, 51, 51); font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; background-color: rgb(254, 254, 254);">有时网页的不同部分会分成多个文件来写样式，或者引用通用的一些样式，那么可以使用@import。<pre class="prettyprint css" style="padding: 0.3em; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; color: rgb(51, 51, 51); border-radius: 4px; margin-bottom: 1.5em; font-size: 12px; line-height: 1.5em; word-break: break-all; white-space: pre-wrap; border: 1px solid rgba(0, 0, 0, 0.14902); overflow-y: auto; background-color: rgb(246, 246, 246);"><code style="padding: 0.3em; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; border-radius: 3px; border: 0px; display: block; overflow-y: auto;">@import "_test1.scss";
@import "_test2.scss";
@import "_test3.scss";</code></pre><h2 style="margin-bottom: 0.5em; font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; line-height: 1.6em; color: rgb(51, 51, 51); text-rendering: optimizeLegibility; font-size: 18px; text-indent: 1em; background-color: rgb(254, 254, 254);">Mixin&Include</h2><p style="margin-bottom: 0.75em; line-height: 27.2px; text-indent: 1em; color: rgb(51, 51, 51); font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; background-color: rgb(254, 254, 254);">Mixin有点像C语言的宏（macro），是可以重用的代码块。<p style="margin-bottom: 0.75em; line-height: 27.2px; text-indent: 1em; color: rgb(51, 51, 51); font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; background-color: rgb(254, 254, 254);">使用@mixin命令，定义一个代码块。<pre class="java" style="padding: 0.3em; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; color: rgb(51, 51, 51); border-radius: 4px; margin-bottom: 0.75em; font-size: 12px; line-height: 1.5em; word-break: break-all; white-space: pre-wrap; border: 1px solid rgba(0, 0, 0, 0.14902); overflow-y: auto; background-color: rgb(246, 246, 246);"><code style="padding: 0.3em; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; border-radius: 3px; border: 0px; display: block; overflow-y: auto;">@mixin left {
float: left;
margin-left: 10px;
}</code></pre><p style="margin-bottom: 0.75em; line-height: 27.2px; text-indent: 1em; color: rgb(51, 51, 51); font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; background-color: rgb(254, 254, 254);">使用@include命令，调用这个mixin。<pre class="ruby" style="padding: 0.3em; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; color: rgb(51, 51, 51); border-radius: 4px; margin-bottom: 0.75em; font-size: 12px; line-height: 1.5em; word-break: break-all; white-space: pre-wrap; border: 1px solid rgba(0, 0, 0, 0.14902); overflow-y: auto; background-color: rgb(246, 246, 246);"><code style="padding: 0.3em; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; border-radius: 3px; border: 0px; display: block; overflow-y: auto;">div {
@include left;
}</code></pre><h3 style="margin-bottom: 0.5em; font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; line-height: 1.6em; color: rgb(51, 51, 51); text-rendering: optimizeLegibility; font-size: 18px; text-indent: 1em; background-color: rgb(254, 254, 254);">参数与缺省值</h3><ul style="margin-bottom: 0.75em; margin-left: 25px; list-style-type: none; line-height: 27.2px; color: rgb(51, 51, 51); font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; background-color: rgb(254, 254, 254);"><li style="line-height: 1.7em;">边距设置</li></ul><pre class="prettyprint ruby" style="padding: 0.3em; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; color: rgb(51, 51, 51); border-radius: 4px; margin-bottom: 1.5em; font-size: 12px; line-height: 1.5em; word-break: break-all; white-space: pre-wrap; border: 1px solid rgba(0, 0, 0, 0.14902); overflow-y: auto; background-color: rgb(246, 246, 246);"><code style="padding: 0.3em; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; border-radius: 3px; border: 0px; display: block; overflow-y: auto;">@mixin common($value1,$value2,$defaultValue:12px){
display:block;
margin-left:$value1;
margin-right:$value2;
padding:$defaultValue;
}
.class1{
font-size:16px;
@include common(12px,13px,15px);
}
.class2{
font-size:16px;
@include common(12px,13px);
}</code>
</pre><ul style="margin-bottom: 0.75em; margin-left: 25px; list-style-type: none; line-height: 27.2px; color: rgb(51, 51, 51); font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; background-color: rgb(254, 254, 254);"><li style="line-height: 1.7em;">浏览器前缀设置设置</li></ul><p style="margin-bottom: 0.75em; line-height: 27.2px; text-indent: 1em; color: rgb(51, 51, 51); font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; background-color: rgb(254, 254, 254);">下面是一个mixin的实例，用来生成浏览器前缀。<pre class="prettyprint ruby" style="padding: 0.3em; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; color: rgb(51, 51, 51); border-radius: 4px; margin-bottom: 1.5em; font-size: 12px; line-height: 1.5em; word-break: break-all; white-space: pre-wrap; border: 1px solid rgba(0, 0, 0, 0.14902); overflow-y: auto; background-color: rgb(246, 246, 246);"><code style="padding: 0.3em; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; border-radius: 3px; border: 0px; display: block; overflow-y: auto;">@mixin rounded($vert, $horz, $radius: 10px) {
border-#{$vert}-#{$horz}-radius: $radius;
-moz-border-radius-#{$vert}#{$horz}: $radius;
-webkit-border-#{$vert}-#{$horz}-radius: $radius;
}</code></pre><p style="margin-bottom: 0.75em; line-height: 27.2px; text-indent: 1em; color: rgb(51, 51, 51); font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; background-color: rgb(254, 254, 254);">使用的时候，可以像下面这样调用：<pre class="prettyprint ruby" style="padding: 0.3em; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; color: rgb(51, 51, 51); border-radius: 4px; margin-bottom: 1.5em; font-size: 12px; line-height: 1.5em; word-break: break-all; white-space: pre-wrap; border: 1px solid rgba(0, 0, 0, 0.14902); overflow-y: auto; background-color: rgb(246, 246, 246);"><code style="padding: 0.3em; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; border-radius: 3px; border: 0px; display: block; overflow-y: auto;">#navbar li { @include rounded(top, left); }
#footer { @include rounded(top, left, 5px); }</code></pre><h2 style="margin-bottom: 0.5em; font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; line-height: 1.6em; color: rgb(51, 51, 51); text-rendering: optimizeLegibility; font-size: 18px; text-indent: 1em; background-color: rgb(254, 254, 254);">编程式方法</h2><h2 style="margin-bottom: 0.5em; font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; line-height: 1.6em; color: rgb(51, 51, 51); text-rendering: optimizeLegibility; font-size: 18px; text-indent: 1em; background-color: rgb(254, 254, 254);">流程控制</h2><h3 style="margin-bottom: 0.5em; font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; line-height: 1.6em; color: rgb(51, 51, 51); text-rendering: optimizeLegibility; font-size: 18px; text-indent: 1em; background-color: rgb(254, 254, 254);">条件语句</h3><p style="margin-bottom: 0.75em; line-height: 27.2px; text-indent: 1em; color: rgb(51, 51, 51); font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; background-color: rgb(254, 254, 254);">@if可以用来判断：<pre class="prettyprint bash" style="padding: 0.3em; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; color: rgb(51, 51, 51); border-radius: 4px; margin-bottom: 1.5em; font-size: 12px; line-height: 1.5em; word-break: break-all; white-space: pre-wrap; border: 1px solid rgba(0, 0, 0, 0.14902); overflow-y: auto; background-color: rgb(246, 246, 246);"><code style="padding: 0.3em; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; border-radius: 3px; border: 0px; display: block; overflow-y: auto;">p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
}</code></pre><p style="margin-bottom: 0.75em; line-height: 27.2px; text-indent: 1em; color: rgb(51, 51, 51); font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; background-color: rgb(254, 254, 254);">配套的还有@else命令：<pre class="prettyprint bash" style="padding: 0.3em; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; color: rgb(51, 51, 51); border-radius: 4px; margin-bottom: 1.5em; font-size: 12px; line-height: 1.5em; word-break: break-all; white-space: pre-wrap; border: 1px solid rgba(0, 0, 0, 0.14902); overflow-y: auto; background-color: rgb(246, 246, 246);"><code style="padding: 0.3em; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; border-radius: 3px; border: 0px; display: block; overflow-y: auto;">@if lightness($color) > 30% {
background-color: #000;
} @else {
background-color: #fff;
}</code></pre><h3 style="margin-bottom: 0.5em; font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; line-height: 1.6em; color: rgb(51, 51, 51); text-rendering: optimizeLegibility; font-size: 18px; text-indent: 1em; background-color: rgb(254, 254, 254);">循环语句</h3><p style="margin-bottom: 0.75em; line-height: 27.2px; text-indent: 1em; color: rgb(51, 51, 51); font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; background-color: rgb(254, 254, 254);">SASS支持for循环：<pre class="prettyprint bash" style="padding: 0.3em; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; color: rgb(51, 51, 51); border-radius: 4px; margin-bottom: 1.5em; font-size: 12px; line-height: 1.5em; word-break: break-all; white-space: pre-wrap; border: 1px solid rgba(0, 0, 0, 0.14902); overflow-y: auto; background-color: rgb(246, 246, 246);"><code style="padding: 0.3em; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; border-radius: 3px; border: 0px; display: block; overflow-y: auto;">@for $i from 1 to 10 {
.border-#{$i} {
 border: #{$i}px solid blue;
}
}</code></pre><p style="margin-bottom: 0.75em; line-height: 27.2px; text-indent: 1em; color: rgb(51, 51, 51); font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; background-color: rgb(254, 254, 254);">也支持while循环：<pre class="prettyprint bash" style="padding: 0.3em; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; color: rgb(51, 51, 51); border-radius: 4px; margin-bottom: 1.5em; font-size: 12px; line-height: 1.5em; word-break: break-all; white-space: pre-wrap; border: 1px solid rgba(0, 0, 0, 0.14902); overflow-y: auto; background-color: rgb(246, 246, 246);"><code style="padding: 0.3em; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; border-radius: 3px; border: 0px; display: block; overflow-y: auto;">$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}</code></pre><p style="margin-bottom: 0.75em; line-height: 27.2px; text-indent: 1em; color: rgb(51, 51, 51); font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; background-color: rgb(254, 254, 254);">each命令，作用与for类似：<pre class="prettyprint ruby" style="padding: 0.3em; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; color: rgb(51, 51, 51); border-radius: 4px; margin-bottom: 1.5em; font-size: 12px; line-height: 1.5em; word-break: break-all; white-space: pre-wrap; border: 1px solid rgba(0, 0, 0, 0.14902); overflow-y: auto; background-color: rgb(246, 246, 246);"><code style="padding: 0.3em; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; border-radius: 3px; border: 0px; display: block; overflow-y: auto;">@each $member in a, b, c, d {
.#{$member} {
 background-image: url("/image/#{$member}.jpg");
}
}</code></pre><h2 style="margin-bottom: 0.5em; font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; line-height: 1.6em; color: rgb(51, 51, 51); text-rendering: optimizeLegibility; font-size: 18px; text-indent: 1em; background-color: rgb(254, 254, 254);">函数</h2><p style="margin-bottom: 0.75em; line-height: 27.2px; text-indent: 1em; color: rgb(51, 51, 51); font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; background-color: rgb(254, 254, 254);">Sass允许用户自定义函数，原型如下所示：<pre class="prettyprint css" style="padding: 0.3em; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; color: rgb(51, 51, 51); border-radius: 4px; margin-bottom: 1.5em; font-size: 12px; line-height: 1.5em; word-break: break-all; white-space: pre-wrap; border: 1px solid rgba(0, 0, 0, 0.14902); overflow-y: auto; background-color: rgb(246, 246, 246);"><code style="padding: 0.3em; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; border-radius: 3px; border: 0px; display: block; overflow-y: auto;">@function double($n) {
@return $n * 2;
}

#sidebar {
width: double(5px);
}</code></pre><h3 style="margin-bottom: 0.5em; font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; line-height: 1.6em; color: rgb(51, 51, 51); text-rendering: optimizeLegibility; font-size: 18px; text-indent: 1em; background-color: rgb(254, 254, 254);">颜色函数</h3><p style="margin-bottom: 0.75em; line-height: 27.2px; text-indent: 1em; color: rgb(51, 51, 51); font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, STXihei, "Microsoft YaHei", 微软雅黑, sans-serif; background-color: rgb(254, 254, 254);">SASS提供了一些内置的颜色函数，以便生成系列颜色。<pre class="prettyprint bash" style="padding: 0.3em; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; color: rgb(51, 51, 51); border-radius: 4px; margin-bottom: 1.5em; font-size: 12px; line-height: 1.5em; word-break: break-all; white-space: pre-wrap; border: 1px solid rgba(0, 0, 0, 0.14902); overflow-y: auto; background-color: rgb(246, 246, 246);"><code style="padding: 0.3em; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; border-radius: 3px; border: 0px; display: block; overflow-y: auto;">lighten(#cc3, 10%)// #d6d65c
darken(#cc3, 10%)//#a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c</code><div> </div></pre></div></div>

页: [1]

守望者--AIR技术交流's Archiver

前端之Sass/Scss实战笔记