琐事屋
每一步都是更接近目标的一步

SASS是成熟,稳定,强大的 CSS预处理器 ,而 SCSS 是SASS3版本当中引入的新语法特性,完全兼容CSS3的同时继承了CSS强大的动态功能。

CSS书写代码规模较大的web应用时,容易造成选择器,层叠的复杂度过高,因此推荐通过SASS预处理器进行CSS的开发,SASS提供的变量,嵌套,混合,继承等特性,让CSS的书写更加有趣和程式化。

1.变量

SASS中可以定义变量,用来存储需要在CSS中复用的信息,方便统一修改和维护。

sass代码:

$blue:#1875e7;
div {
  color : $blue;
}

 对应生成的css代码:

div {
    color : #1875e7;  
}

 如果变量需要镶嵌在字符串中,就必须写在  #{}  中:

$side : left;
.rounded{
    border-#{$side}-radius : 5px;  
}

2.嵌套

 

posted on 2019-06-20 16:59  六耳石猴  阅读(187)  评论(0编辑  收藏  举报