SCSS 的理解
ASS是CSS3的一个扩展,增加了规则嵌套、变量、混合、选择器继承等等。通过使用命令行的工具或WEB框架插件把它转换成标准的、格式良好的CSS代码。
它其实跟LESS前面的基础内容也差不多,知识在LESS的前提下增加了。 Sass语法较为严谨、严密,同时逻辑性和运算功能更强大,他更贴近机器语言逻辑比较分明
比如:隐藏注释,占位符选择器,数据类型,颜色操作,变量的默认值,扩展,控制指令(如@if
,@for
或@while
)等。
Sass的一个关键特性是缩进式的语法,这种语法可以产生柱式外观的代码,而且之前之前说说的LESS他是受到SCSS的启发才生成的一个工具,当然LESS也是有各自的优缺点
作为框架型语言SCSS更具有逻辑性,同时也他的上手难度也相对增加了。如果想要玩的6的话,还是要更多的在逻辑性语言中下点功夫这样对于SCSS来说更好理解和接受,
下面是我个人的代码:
@mixin wh($h,$w){
width: $w;
height: $h;
}
@mixin zt($F-s,$F-w){
font-weight:$F-w ;
font-size:$F-s ;
}
@mixin margin($top,$left,$rig,$bot){
margin-top: $top;
margin-left: $left;
margin-right: $rig;
margin-bottom: $bot;
}
$b:1px solid red;
$md:0px auto;
@mixin typeface_li($t-h,$-c:left,$f-w:normal,$f-z:12px,$t-d:none,$color:black,$l-s:none){
line-height:$t-h;
font-weight:$f-w ;
text-align: $-c;
font-size: $f-z;
text-decoration:$t-d;
color:$color ;
list-style:$l-s;
}
*{
margin: 0px ;
padding: 0px;
// font-family: "BrushScriptStd";
font-family:ACaslonPro-BoldItalic;
}
body{
@include wh(100%,100%);
min-width:960px;
background-image: url("images/main-bg.jpg");
background-repeat:no-repeat ;
background-color:#1a1a1a ;
}
header{
@include wh(520px,950px);
margin: 100px auto;
background-image: url("images/slide-1.jpg");
}
这是一个网页的代码,太多所以也就并没有全部弄来,知识前面的声明和编译才是SCSS的核心就可以了。对于我来说我还是觉得CSS更得我心,,可以更好的驾驭它,也可以能是我才接触,对于新鲜事物的抵触吧,不过看以后,一切都会随着时间改变