1.1基本说明 使用Sass,在编写css样式时采用类似dom的树形结构的方式,一层一层的包裹,在查阅时会容易找到相应的节点。并且介绍了编写的代码。如:
#main p {
color: #00ff00;
width: 97%;
.redbox {
background-color: #ff0000;
color: #000000;
}
}
//编译为
#main p {
color: #00ff00;
width: 97%; }
#main p .redbox {
background-color: #ff0000;
color: #000000; }
&。写法如下:
a {
font-weight: bold;
&:hover { text-decoration: underline; }
body.firefox & { font-weight: normal; }
}
编译为
a {
font-weight: bold;}
a:hover {
text-decoration: underline; }
body.firefox a {
font-weight: normal; }
其中&符就充当了父元素。
还有属性嵌套,就类似与对象,就不详述了。
2.1基本说明
这里的变量和javascript中类似,具有块状作用域(注意key与value之间是:)。value的值可以是数字,字符串,颜色,布尔值,空值,数组(几乎只要是css中的属性值都可以用变量替代),在css中,运用变量可以统一管理一些值,比如色彩,常用文字的字号,只需要改动变量,引用处都会改动。
$width: 5em;
#main {
width: $width;
}
//编译为
#main {
width: 5em;
}
2.2插值语句 #{}
通过 #{} 插值语句可以在选择器或属性名中使用变量。如:
$name: foo;
$attr: border;
p.#{$name} {
#{$attr}-color: blue;
}
/*这是注释*/。该种格式是传统的css注释,当在Sass里写这种注释,编译成css时注释也会被带上。第二种是//,这种注释编译时会被删除了。4.1基本说明
所有数据类型均支持相等运算 ==或 !=。
p {
width: 1in + 8pt;
}
//编译为
p {
width: 1.111in;
}
/ 在 CSS 中通常起到分隔数字的用途,
以下三种情况 / 将被视为除法运算符号:
p {
font: 10px/8px;
$width: 1000px;
width: $width/2;
width: round(1.5)/2;
height: (500px/2);
margin-left: 5px + 8px/2px;
}
//编译为
p {
font: 10px/8px;
width: 500px;
height: 250px;
margin-left: 9px;
}
如果需要使用变量,同时又要确保 / 不做除法运算而是完整地编译到 CSS 文件中,只需要用 #{} 插值语句将变量包裹。
p {
$font-size: 12px;
$line-height: 30px;
font: #{$font-size}/#{$line-height};
}
//编译为
p {
font: 12px/30px;
}
//将会被编译为 .main .example { color: red; }
- 5.2编译部分文件
当通过`@import`把`sass`样式分散到多个文件时,你通常只想生成少数几个`css`文件。那些专门为`@import`命令而编写的`sass`文件,并不需要生成对应的独立`css`文件,这样的`sass`文件称为局部文件。对此,`sass`有一个特殊的约定来命名这些文件。此约定即,`sass`局部文件的文件名以下划线开头。这样,`sass`就不会在编译时单独编译这个文件输出`css`,而只把这个文件用作导入。当你`@import`一个局部文件时,还可以不写文件的全名,即省略文件名开头的下划线。举例来说,你想导入`themes/_night-sky.scss`这个局部文件里的变量,你只需在样式表中写`@import "themes/night-sky"`;
- 5.3引入文件的修改 默认变量值
当局部文件被多个文件引用,但它们可能对局部文件中的某一个属性需要修改一下,这时就需要一个默认值。使用sass的!default标签可以实现这个目的。它很像css属性中!important标签的对立面,不同的是!default用于变量,含义是:如果这个变量被声明赋值了,那就用它声明的值,否则就用这个默认值。
$fancybox-width: 400px !default; .fancybox { width: $fancybox-width; } ```
@mixin tag-center{
position:absolute;
top:50%;
left:50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
当需要复用这段代码,就使用混合器。
@mixin tag-center($top,$left,$x,$y){
position:absolute;
top:$top;
left:$left;
-webkit-transform: translate($x,$y);
-moz-transform: translate($x,$y);
-ms-transform: translate($x,$y);
-o-transform: translate($x,$y);
transform: translate($x,$y);
}
在引用时给它传入参数。 实质上就是复制这个代码到想要的地方。
.bip .baz 不行。一日过,一日想,一日虚度,迷于往昔之闲适,人不强也,虽有春花秋月迷人眼,具往兮。年轻人可无远志,但应抱学习之心,学修身养性、学行为处事,假以时日,自当成才。严于己而后勤于生,诫己。