SASS快速入门

SASS快速入门

一、使用变量

　　1-1、变量申明

　　sass的变量的声明和css属性的声明很像：

$highlighe-color: #f90;

 

　　这意味着变量$highlight-color现在的值是#f90。任何可以用作css属性值的赋值都可以用作sass的变量值，甚至是以空格分割的多个属性值，比如￥basic-border: 1px solide black;，或以逗号分割的多个属性值，如$plain-font: "Myriad", Myriad, "Helvetica Neue"; 。这时变量还没有生效，除非你引用这个变量-------我们很快就会了解如何引用。

　　与css 属性不同，变量可以在css规则定义之外存在，当变量定义在css规则块内，那么该变量只能在此规则块内使用，如果他们出现在任何形式的｛...｝快中（如@media或者@font-face块），情况也是如此：

$nav-color: #f90;
nav{
  $widch: 100px;
  width: $width;
  color: $nav-color;  
}
//编译后
nav{
  width: 100px;
  color: #f90;    
}

　　在这段代码中，$nav-color这个变量定义在规则块外边，所以在这个样式表中都可以像NAVER规则块那样引用它。$width这个变量定义在了nav的｛｝规则块内，所以它只能在nav规则块内使用。这意味着是你可以在样式表的其他地方定义和使用$width变量，不会对这里造成影响。

　　只声明变量其实没啥用处，我们最终的目的还是使用它们。上例已介绍了如何使用$nav-color和$width这两个变量，接下来我们将进一步探讨变量的使用方法。

　　1-2、变量引用

　　凡是css属性的标准值（比如说1px或者bold）可存在的地方，变量就可以使用。css生成时，变量会被它们的值所取代。之后，如果你需要一个不同的值，只需要改变这个变量的值，这所有引用此变量的地方生成的值随之改变。

$highlighe-color: #f90;
.selected {
  border: 1px solid $highlight-color;  
}
//编译后
.select{
  border: 1px solid #f90;  
}

　　看上边示例中的$highlight-color变量，它被直接赋值给border属性，当这段代码被编译输出css时，$highlight-color会被#f90这一颜色值所替代。产生的效果就是给selected这个类一条1像素宽、实心且颜色值为#f90的边框。在声明变量时，变量值也可以引用其他变量。当你通过粒度区分，为不同的值取不同名字时，这相当有用。下例在独立的颜色值粒度上定义了一个变量，且在另一个更复杂的边框值粒度上也定义了一个变量：

 

$highlight-color: #f90;
$highlight-border: 1px solid $highlight-color;
.selected{
  border: $highlight-border;  
}
//编译后
.selected{
  border: 1px solid #f90;   
}

　　这里，$highlight-border变量的声明中使用了$highlight-color这个变量。产生的效果就跟你直接为border属性设置一个1px solid $highlight-color 的值是一样的。最后，我们来了解一下变量命名的使用技巧，以结束关于变量的介绍。

　　1-3、变量名用中划线还是下划线分钟

　　sass的变量名可以与css中的属性名和选择器名称相同，包括中划线和下划线。这完全取决于个人的喜好，有些人喜欢使用中划线来分隔变量中的多个词（如$highlight-color），而有些人喜欢使用下划线（如$highlight_color）。使用中划线的方式更为普遍，这也是compass和本文都用的方式。

　　不过，sass并不想强迫任何人一定使用中划线或下划线，所以这两种用法相互兼容。用中划线声明的变量可以使用下划线的方式引用，反之亦然。这意味着即使compass选择用中划线的命名方式，这并不影响你在使用compass的样式中用下划线的命名方式进行引用：

$link-color: blue;
a {
  color: $link_color;
}

//编译后

a {
  color: blue;
}　　　

　　在上例中，$link-color和$link_color其实指向的是同一个变量。实际上，在sass的大 多数地方，中划线命名的内容和下划线命名的内容是互通的，除了变量，也包括对混合器和Sass函数的命名。但是在sass中纯css部分不互通，比如类名、ID或属性名。

　　尽管变量自身提供了很多有用的地方，但是sass基于变量提供的更为强大的工具才是我们关注的焦点。只有当变量与sass的其他特性一起使用时，才能发挥其全部的潜能。接下来，我们将探讨其中一个非常重要的特性，即规则嵌套。

二、嵌套CSS规则：

posted @ 2019-01-23 11:53 或许这就是生活 阅读( ...) 评论( ...) 编辑 收藏