sass学习总结的几点

详细的学习网址:http://www.sasschina.com/guide/ saa中文网

Sass的几大特性:

变量 嵌套 混合器@minxin 继承@extend

了解了保持sass条理性和可读性的最基本的三个方法:

嵌套、导入和注释。

1.sass变量声明作用域

与CSS属性不同,变量可以在css规则块定义之外存在。当变量定义在css规则块内,那么该变量只能在此规则块内使用。如果它们出现在任何形式的{…}块中(如@media或者@font-face块),情况也是如此

2.:hover

大多数情况下这种简单的嵌套都没问题,但是有些场景下不行,比如你想要在嵌套的选择器 里边立刻应用一个类似于:hover的伪类。为了解决这种以及其他情况,sass提供了一个特殊结构&

article a {
  color: blue;
  :hover { color: red }
}

这意味着color: red这条规则将会被应用到选择器article a :hover,article元素内链接的所有子元素在被hover时都会变成红色。这是不正确的!你想把这条规则应用到超链接自身,而后代选择器的方式无法帮你实现。

article a {
  color: blue;
  &:hover { color: red }
}

当包含父选择器标识符的嵌套规则被打开时,它不会像后代选择器那样进行拼接,而是&被父选择器直接替换:

article a { color: blue }
article a:hover { color: red }

3.!default

假如你写了一个可被他人通过@import导入的sass库文件,你可能希望导入者可以定制修改sass库文件中的某些值。使用sass的!default标签可以实现这个目的。它很像css属性中!important标签的对立面,不同的是!default用于变量,含义是:如果这个变量被声明赋值了,那就用它声明的值,否则就用这个默认值。

4.关于继承

.seriousError不仅会继承.error自身的所有样式,任何跟.error有关的组合选择器样式也会被.seriousError以组合选择器的形式继承,如下代码:

//.seriousError从.error继承样式
.error a{  //应用到.seriousError a
  color: red;
  font-weight: 100;
}
h1.error { //应用到hl.seriousError
  font-size: 1.2rem;
}

如上所示,在class=”seriousError”的html元素内的超链接也会变成红色和粗体。

    原文作者:specialCoder
    原文地址: https://segmentfault.com/a/1190000007455150
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞