江苏龙网

  1. 主页 > 生活百科 > >

Sass入门教程( 二 )

Sass


index.scss文件中导入index2.scss文件
#index.scss文件$color:yellow;$font:18px;$background:red;@import 'index2.scss';body { color:$color; background:$background; font-size:$font; width: $width; height:$height;}#index2.scss文件$width:100px;$height:100px;body{ font-family:"Times New Roman",Georgia,Serif;}/*生成后的index.css文件*/body{ font-family:"Times New Roman",Georgia,Serif}body{ color:#ff0; background:red; font-size:18px; width:100px; height:100px}/*# sourceMappingURL=index.css.map */用法：可以在被引入的文件中定义默认值，主文件@import这个文件后，如果主文件中变量有定义，就不会被覆盖 。
sass入门用法
语法与注释
Sass中的注释有3种：//我是单行注释不会出现在编译之后任何格式的CSS文件中 。/*我是多行注释*/只会出现在编译之后代码格式为expanded的CSS文件中 。/*!我是强制注释*/会出现在任何代码格式的CSS文件中 。//使用大括号的方式布局，类似于cssbody { color:red; background:#fff;}div{ }变量和嵌套
变量是Sass中最基本的语法 。凡是css属性的标准值（比如说1px或者bold）可存在的地方，都可以替换为变量 。之后，如果你需要一个不同的值，只需要改变这个变量的值，则所有引用此变量的地方生成的值都会随之改变 。通过 $ 符号来定义，通过变量名称实现多处重复引用 。（注：变量名中连字符和下划线等效，$primary_color 与 $primary-color是同一个变量）
$color:yellow; //定义变量$font:18px; //定义变量$background:red; //定义变量body { $width:180px; //定义局部变量 $header-color: orange !global; //可以在选择器中使用 !global 标志定义全局变量 。color:$color; //引用变量 background:$background; //引用变量 font-size:$font; //引用变量 border:1px solid $color; //多个属性值时引用变量 width:$width; //引用变量}div{ color:$header-color;}//编译成css文件body { color:yellow; background:red; font-size:18px; border:1px solid yellow; width:180px;}div{ color:orange;}sass可以嵌套设置样式，这样比css方便了很多：
div{ p{ color:$color; a{ font-size:$font; } } span{font-size:$font;}}//编译成css文件div p{color:yellow;}div p a{font-size:18px;}div span{font-size:18px;}大多数情况下上面那种简单的嵌套都没问题 。但如果你想要在嵌套的选择器里边应用一个类似于：hover的伪类，就需要用到 & 这个连接父选择器的标识符：
div { p { margin-bottom: 1.4px; &:hover { color: #999; } }}//编译成css文件div p { margin-bottom: 1.4px; }div p:hover { color: #999; }操作符
Sass操作符（或运算符）包括加法、减法、除法、等号操作符等 。
等号操作符
所有数据类型都支持等号运算符：
==等于!=不等于
除了等号运算符之外，每种数据类型还支持各自的一组操作符 。
数字操作符
SassScript支持以下标准的算术操作符:
+加-减*乘/除%取模
算术运算符的一个常见用法是宽度计算 。
例如，下面的例子计算宽度百分比：
.container {width: 100%; }article { float: left; width: 700px / 960px * 100%;}.sidebar { float: right; width: 200px / 960px * 100%;}经过编译输出以下CSS代码：
.container { width: 100%; }article { float: left; width: 72.91667%; }.sidebar { float: right; width: 20.83333%; }使用算术操作符时，参与运算的数据单位必须相同 。否则会报错(例如，一个用px，另一个用em)：
.box-big { font-size: 22px + 4em; // Error: Incompatible units: 'em' and 'px'. width: 30% - 20px; // Error: Incompatible units: 'px' and '%'. }颜色操作符
算术操作符也适用于颜色 。计算颜色时，参与运算的是R, G, B分量，而不是整个六位数颜色值 。
例如，当把两个十六进制颜色值相加时，将依次把每一对分量值相加 。
示例：
body { color: #991100 + #002299;}经过编译输出以下CSS代码：
body { color: #993399; }还可以对颜色和数字应用运算符 。例如
body { color: #112233 * 2;}经过编译输出以下CSS代码：
body { color: #224466; }写到这里，无不感慨sass的强大以及技术发展的迅速 。到这里入门sass也绰绰有余了 。后续会有进阶文章继续！

Sass入门教程

文章插图
 




推荐阅读


上一篇：Mac怎么使用隔空投送

下一篇：netstat命令详解