SASS

$nav-color:#F90; 声明变量

nav {

$width:100px;  

width:$width;  

color:$nav-color;

}

使用一个特殊的sass选择器,即父选择器。在使用嵌套规则时,父选择器能对于嵌套规则如何解开提供更好的控制。它就是一个简单的&符号

article a {

color:blue;  

&:hover { color:red }

}

减少代码 

处理这种群组选择器规则嵌套上的强大能力,正是sass在减少重复敲写方面的贡献之一

.container h1, .container h2, .container h3 {margin-bottom:.8em}

=》 .container {

  h1, h2, h3 {margin-bottom: .8em}}

在sass中,除了CSS选择器,属性也可以进行嵌套。尽管编写属性涉及的重复不像编写选择器那么糟糕,但是要反复写border-styleborder-widthborder-color以及border-*等也是非常烦人的。在sass中,你只需敲写一遍border:

nav{

border: {

  style: solid;width:1px;color:#ccc;

}}

混合器使用@mixin标识符定义,可以在你的样式表中通过@include来使用这个混合器,混合器还可以传递参数

继承 因为继承是基于类的(有时是基于其他类型的选择器),所以继承应该是建立在语义化的关系上。当一个元素拥有的类(比如说.seriousError)表明它属于另一个类(比如说.error),这时使用继承再合适不过了

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 1、LESS的官网:http://lesscss.org 2、Sass官网地址:http://sass-lang....
    Howie223阅读 3,911评论 0 5
  • 前言: 为了提高开发效率,前去学习sass。学完后发现非常简单,官网上前文太多,学习起来十分不效率。因此出一片这样...
    022901c9b093阅读 362评论 0 1
  • Sass简介 Sass是一个CSS预处理器,CSS预处理器是用一种专门的编程语言,进行页面样式设计,然后再编译成正...
    gakiww阅读 349评论 0 2
  • 基础 声明变量 普通变量 默认变量 变量覆盖:只需要在默认变量之前重新声明下变量即可 变量的调用 局部变量和全局变...
    Jill1231阅读 1,372评论 0 1
  • 人的一生或短或长,却都有各自的迷茫。 在十八岁的我遇到了自己人生中第一次的迷茫,它不同于思考今天早餐吃什么,也不同...
    肆和阅读 1,034评论 2 1

友情链接更多精彩内容