1 /*!
2 ©CopyRight
3 */
4 //*********注释*********
5 //SASS共有两种注释风格。
6 //标准的CSS注释 /* comment */ ，会保留到编译后的文件。
7 //单行注释 // comment，只保留在SASS源文件中，编译后被省略。
8 //在/*后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。
9
10 //*********数据类型*********
11 //numbers (e.g. 1.2, 13, 10px)
12 //strings of text, with and without quotes (e.g. "foo", ‘bar‘, baz)
13 //colors (e.g. blue, #04a3f9, rgba(255, 0, 0, 0.5))
14 //booleans (e.g. true, false)
15 //nulls (e.g. null)
16 //lists of values, separated by spaces or commas (e.g. 1.5em 1em 0 2em, Helvetica, Arial, sans-serif)
17 //maps from one value to another (e.g. (key1: value1, key2: value2))
18
19 //*********变量*********
20 //简单变量定义，使用
21 $blue : #1875e7;
22
23 div {
24 color : $blue;
25 }
26 //如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中
27 $side : left;
28 .rounded {
29 border-#{$side}-radius: 5px;
30 }
31 //默认值 !default
32 //假设变量申明带有!default，那么如果在此申明之前没有这个变量的申明，则用这个值，反之如果之前有申明，则用申明的值。
33 $color:red;
34 $color:blue !default;
35 p{
36 color:$color;//red
37 }
38 //多个变量一起申明
39 //把多个相关的值写在一个变量里，然后通过nth($var,index)来获取第几个值
40 $linkColor: red blue !default;
41
42 a{
43 color:nth($linkColor,1);
44
45 &:hover{
46 color:nth($linkColor,2);
47 }
48 }
49 //全局变量 !global
50 #main {
51 $width: 5em !global;
52 width: $width;
53 }
54 #sidebar {
55 width: $width;
56 }
57
58 //*********计算*********
59 $var : 20;
60 body {
61 margin: (14px/2);
62 top: 50px + 100px;
63 right: $var * 10%;
64 }
65 //*********嵌套*********
66
67 /* 下面的代码，等同于：
68 div h1 {
69 color : red;
70 }
71 */
72 div {
73 hi {
74 color:red;
75 }
76 }
77 //border-color
78 p {
79 border: {
80 color: red;
81 }
82 }
83 //在嵌套的代码块内，可以使用&引用父元素。比如a:hover伪类，可以写成
84 a {
85 &:hover { color: #ffb3ff; }
86 }
87 //跳出嵌套：@at-root
88 //默认所有的嵌套，继承所有上级选择器，但有了这个就可以跳出所有上级选择器
89 //默认@at-root只会跳出选择器嵌套，而不能跳出@media或@support，如果要跳出这两种，则需使用@at-root (without: media)，@at-root (without: support)。
90 //这个语法的关键词有四个：all（表示所有），rule（表示常规css），media（表示media），support（表示support）。我们默认的@at-root其实就是@at-root (without:rule)。
91
92 //跳出父级元素嵌套
93 @media print {
94 .parent1{
95 color:#f00;
96 @at-root .child1 {
97 width:200px;
98 }
99 }
100 }
101
102 //跳出media嵌套，父级有效
103 @media print {
104 .parent2{
105 color:#f00;
106
107 @at-root (without: media) {
108 .child2 {
109 width:200px;
110 }
111 }
112 }
113 }
114
115 //跳出media和父级
116 @media print {
117 .parent3{
118 color:#f00;
119
120 @at-root (without: all) {
121 .child3 {
122 width:200px;
123 }
124 }
125 }
126 }
127 //@at-root与&配合使用
128 .child{
129 @at-root .parent &{
130 color:#f00;
131 }
132 }
133
134 //*********继承 继承要使用@extend命令*********
135 //使用SASS继承时有一个规则:
136 //通过@extend引用的类名，你要有绝对的自信，它从未用在几个地方。
137 .class1 {
138 border: 1px solid #ddd;
139 }
140 .class2 {
141 @extend .class1;
142 font-size:120%;
143 }
144 //强大的%placeholders
145 //%为占位符，名称自定义
146 %placeholders {background-color: #fff;}
147 selector {
148 @extend %placeholders;
149 }
150
151 //*********重用*********
152 //使用@mixin命令，定义一个代码块
153 //使用@include命令，调用这个mixin
154 //Mixins的黄金规则是将相似的风格定义在一个@mixin中。
155 //请注意这里的一个关键词相似的，另外Mixins主要是用于重用，而不是用来指定具体的属性值。
156 //指定具体的属性值 可以用继承
157 @mixin left {
158 float: left;
159 margin-left: 10px;
160 }
161 div {
162 @include left;
163 }
164 //mixin的强大之处，在于可以指定参数和缺省值
165 @mixin left($value: 10px) {
166 float: left;
167 margin-right: $value;
168 }
169 //使用的时候，根据需要加入参数
170 div {
171 @include left(20px);
172 }
173 //多组值参数mixin
174 //如果一个参数可以有多组值，如box-shadow、transition等，那么参数则需要在变量后加三个点表示，如$variables...
175 //box-shadow可以有多组值，所以在变量参数后面添加...
176 @mixin box-shadow($shadow...) {
177 -webkit-box-shadow:$shadow;
178 box-shadow:$shadow;
179 }
180 .box{
181 border:1px solid #ccc;
182 @include box-shadow(0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3));
183 }
184 //@content
185 //它可以使@mixin接受一整块样式，接受的样式从@content开始
186 //sass style
187 @mixin max-screen($res){
188 @media only screen and ( max-width: $res )
189 {
190 @content;
191 }
192 }
193 @include max-screen(480px) {
194 body { color: red }
195 }
196 //css style
197 @media only screen and (max-width: 480px) {
198 body { color: red }
199 }
200
201 //下面是一个mixin的实例，用来生成浏览器前缀
202 @mixin rounded($vert, $horz, $radius: 10px) {
203 border-#{$vert}-#{$horz}-radius: $radius;
204 -moz-border-radius-#{$vert}#{$horz}: $radius;
205 -webkit-border-#{$vert}-#{$horz}-radius: $radius;
206 }
207 #navbar li { @include rounded(top, left); }
208 #footer { @include rounded(top, left, 5px); }
209
210 //*********颜色函数************
211 div {
212 color : lighten(#cc3, 10%); // #d6d65c
213 color : darken(#cc3, 10%); // #d6d65c
214 color : grayscale(#cc3); // #d6d65c
215 color : complement(#cc3); // #d6d65c
216 }
217
218 //*********插入文件*********
219 //@import命令，用来插入外部文件
220 @import "_test2.scss";
221
222 //*********条件语句*********
223 //@if
224 p {
225 @if 1 + 1 == 2 { border: 1px solid; }
226 @if 5 < 3 { border: 2px dotted; }
227 }
228 // @if @else
229 $color : #1875e7;
230 p {
231 @if lightness($color) > 30% {
232 background-color: #000;
233 } @else {
234 background-color: #fff;
235 }
236 }
237
238 //*********循环*********
239 //@for
240 @for $i from 1 to 10 {
241 .border-#{$i} {
242 border: #{$i}px solid blue;
243 }
244 }
245 //@while
246 $i: 6;
247 @while $i > 0 {
248 .item-#{$i} { width: 2em * $i; }
249 $i: $i - 2;
250 }
251 //@each 与for类似
252 @each $member in a, b, c, d {
253 .#{$member} {
254 background-image: url("/image/#{$member}.jpg");
255 }
256 }
257
258 //*********自定义函数*********
259 //@function与@mixin，%这两者的第一点不同在于sass本身就有一些内置的函数，方便我们调用，如强大的color函数；
260 //其次就是它返回的是一个值，而不是一段css样式代码什么的。
261 @function double($n) {
262 @return $n * 2;
263 }
264 #sidebar {
265 width: double(5px);
266 }
267
268
269 //延伸
270 //@mixin通过@include调用后解析出来的样式是以拷贝形式存在的
271 //@mixin需要@include来调用，而.class和%placeholders需要@extend来调用
272 //@include主要是用来调用@mixin定义的函数模块。在@mixin中可以定义一个相似功能样式，而且可以设置变量、定义参数和默认参数值；
273 //@extend主要是用来调用.class或者%placeholders定义的属性模块；在.class或者%placeholders中可以定义一个相同样式，但这里面不能定义参数；
274 //@include每次调用相同的@mixin时，编译出来的CSS相同样式不会进行合并；
275 //@extend每次调用相同的 .class时，如果.class在样式出现多次，那么编译出来的CSS有可能不是您需要的样式；
276 //@extend每次调用相同的%placeholders时，编译出来的CSS相同样式会进行合并。
277 //%placeholders就类似于CSS中的.classes或者#ids，只不过使用%代替了.和#。但%placeholders中的代码只有通过 @extend调用之后才会产生代码量，不然他是不会产生任何代码量。
278 //不要使用没有设置参数的@mixin，他们应该是.class或者%placeholders;
279 //不要轻意（从不使用）@extend调用.class。会得到你意想不到的结果，特别是定义的.class出现在嵌套或其他的样式表中，你应该使用@extend调用%placeholders;
280 // 不要使用太深的选择器嵌套。
281 //如果你能避免，不要使用标签名。这不是一个taxative规则，但比id或者类名的性能要更低；
282 //不要使用子选择器符号>，在SASS中很无效；
283 //不要使用同史选择器+，配合你当前的标记他是非常无效。
284 //不要太相信SASS的自动编译，你应该时时检查生成的CSS。在SASS中纠错能力比较差；
附件：http://files.cnblogs.com/files/bocoimg/sass.rar
附件是Sass代码示例，包含了Sass常用的注释、变量、计算、循环、嵌套、继承、函数等方面的内容，可以参考一下。
文件说明：
_test.scss：Sass代码示例
_test2.scss：仅为演示Import的空文件
test.css：编译_test.scss后的样式文件
ps：编译相关：
编译命令：sass _test.scss test.css
SASS提供四个编译风格的选项：* nested：嵌套缩进的css代码，它是默认值。
* expanded：没有缩进的、扩展的css代码。
* compact：简洁格式的css代码。
* compressed：压缩后的css代码。
生产环境当中，一般使用最后一个选项。
sass --style compressed test.sass test.css
你也可以让SASS监听某个文件或目录，一旦源文件有变动，就自动生成编译后的版本。
// watch a file
sass --watch input.scss:output.css
// watch a directory
sass --watch app/sass:public/stylesheets
sass中文编译：设置环境变量：RUBYOPT=-KU。否则不支持中文,编译会报错
时间： 2024-11-05 04:14:18