Sass基础入门(1)

为何有sass

作为一个前端web开发人员，一定对css不陌生，大部分开发者对css是既爱又恨的，通过简单的代码使页面美化，但是随着项目的复杂性越来越高，它的可维护性会越差，作为开发人员，css更像使一门设计语言而非开发语言

缺少模块化机制 缺少变量机制 使得滋生很多重复的代码
嵌套层级写法痛苦
复用困难 以此有需求就会有市场 Sass因此而生
Sass是世界上最成熟的，最稳定，最强大的专业级css拓展语言

变量机制

Sass准许使用变量，所有的变量以$开头，注意如果变量需要嵌套在字符串之中，就必须写在#{}中 使用变量定义的好处显而易见，1把调用频繁的变量属性放置单一的文件夹，方便多人协调开发，2便于统一项目样式风格。来看下面示例代码

$main-color: #333;
$side: left;
.div1 {
    background: $main-color;
    border-#{$side}-redius: 5px;
}
.div2 {
    background: $main-color;
}

嵌套写法

没有嵌套的写法是css最头大的地方了，之前和之后对比，有了Sass就简单多了，避免了大量选择器

.wrap .cont .sider .title {
    font-size: 10px;
}
.wrap .cont .sider .age {
    font-size: 19px;
}
.wrap{
    .cont{
        .sider{
            .title{
                font-size: 10px;
            }
            .age{
                font-size: 19px;
            }
        }
    }
}

模块机制

@import "../../assets/scss/moveList.scss";   //导入scss文件中
@import "../../assets/scss/liveList.scss";   
@import "../../assets/scss/popUp.scss";

@import使得开发css 和 html完全的分离，通过一个文件引入css即可，修改样式也不需要到html文件中，项目也不会随着变得更加复杂，只需要增加修改即可，删除对应模块

Mixin

sass提供了混合指令，便于多处复用，

//没用sass之前 我们的css
.focused{
    width: 570px;
    height: 339px;
    border: 2px solid chartreuse;
}
.unfocused{
    width: 570px;
    height: 339px;
    border: 4px solid red;
}
//如果想抽离出来共用的代码只能这样做
.focused,
.unfocused{
    width: 570px;
    height: 339px;
}
.focused,
.unfocused{..........}
//使用了sass之后 简单了许多就
@mixin all-size {
    width: 570px;
    height: 339px;
}
.focused{
    @include all-size;
    border: 2px solid chartreuse;
}
.unfocused{
    @include all-size;
    border: 4px solid red;
}

继承机制

Sass还提供了继承机制，准许一个选择器继承另一个选择器 假如有一个消息框，除了基础样式外，其还有成功和失败样式，用 CSS 写法是这样的：

.msg {
    border: 1px solid #e3e3e3;
    background: #dff0d8;
}
.msg-success {
    color: #4cae4c;
}
.msg-error {
    color: #d43f3a;
}
复制代码
如果以上定义样式，需要在每个标签都多加一个 .msg 的类名，使用 Sass 继承机制后：
.msg {
    border: 1px solid #e3e3e3;
    background: #dff0d8;
}
.msg-success {
    @extend .msg;
    color: #4cae4c;
}
.msg-error {
    @extend .msg;
    color: #d43f3a;
}
复制代码
其编译后：
.msg, .msg-success, .msg-error {
  border: 1px solid #e3e3e3;
  background: #dff0d8;
}
.msg-success {
  color: #4cae4c;
}
.msg-error {
  color: #d43f3a;
}

补充面试题？

预处理语言 sass less ？
less和sass最大的区别在于其实现方式不同
less是基于javascript运行，所以less也常用语 客户端处理
sass是基于Ruby， 常在 服务端处理

CSS简单易懂，但是毫无逻辑 为啥毛 用sass&less？
常常一个颜色的值能出现很多很多次，或者一个宽度的值能出现很多次；
大量的选择器在代码中，一会用那个，一会用这个，毫无逻辑，无层次，不美观，不易维护
每一个新属性的诞生又会带来大量浏览器兼容性的问题
此外，CSS虽然易学，好用，但其短板不可忽视，于是就引入了预处理语言

简述sass和less区别？
sass是基于ruby编译的，less是基于nodejs编译的
sass有@extednd用于做继承，而less没有
sass用$定义一个变量，less用@定义一个变量
sass支持@for循环，less则不支持