6.全局变量
sass暂时没有局部变量 局部定义变量会覆盖全局变量 新出!global 不过要sass 3.4版本以后 (这句呢,,我觉得是错的 开始写的时候没测试 现在发现我觉得他是有局部作用域的 具体明天问作者~ 我已经加群提问题了)
例:
$font-size:12px; 设置全局
body {
$font-size:14px; //覆盖掉了全局
font-size:$font-size //14
}
p {
font-size:$font-size; //14 这个我觉得是错的。 因为我输出的是12 讲解的人上面写
的14!!!所以说上面的那个并不是覆盖了全局
}
global例:结局没有想到竟然是设置global的是全局,不设置的global的其他原来应该是全局变量的变量竟变
成了局部。。(这个测试不了 就当他是对的吧 哈哈哈)
$font-size:12px;
$color:#fff;
body {
$font-size:14px;
$color: #ccc !global;
font-size:$font-size;
color:$color;
}
p {
font-size:$font-size;
color:#color;
}
解析后
body {
font-size:14px;
color:#ccc;
}
p {
font-size:12px;
color:#ccc;
}
**********sass与scss是一个东西但是呢,写法是不同的支持的也不同,scss写法与css写法相似有大括号与;符号
而且支持hack,而sass写法正好相反 不加任何大括号与;符号(与es5 es6又有点类似之处!~)**********
7.嵌套
这个我觉得是sacc真正有用的东西!~一层套一层 结构清晰 而且可以用哪个&表示父元素 主要用:hover的时
候用
例:
#top_nav {
line-height:40px;
text-transform:capitalize;
background-color:#333;
li {
float:left;
}
a {
display:block;
padding:0 10px;
color:#ddd;
&:hover {
color:#ddd;
}
}
}
编译后:
#top_nav{
line-height: 40px;
text-transform: capitalize;
background-color:#333;
}
#top_nav li{
float:left;
}
#top_nav a{
display: block;
padding: 0 10px;
color: #fff;
}
#top_nav a:hover{
color:#ddd;
}
8.属性嵌套 : 个人感觉这个很鸡肋 不如用list?
例:
.fakeshadow {
border: {
style: solid;
left: {
width: 4px;
color: #888;
}
right: {
width: 2px;
color: #ccc;
}
}
}
编译后:
.fakeshadow {
border-style: solid;
border-left-width: 4px;
border-left-color: #888;
border-right-width: 2px;
border-right-color: #ccc;
}