sass学习笔记接上个 持续学习中..（还发现个讲解的bug） sass至少我现在学的版本支持局部变量了

Posted 2020-09-10

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;
}