zoukankan      html  css  js  c++  java
  • 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;
      color: $nav-color;  
    }
    //编译后
    nav{
       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规则:

  • 相关阅读:
    BZOJ 3205 [Apio2013]机器人 ——斯坦纳树
    BZOJ 3782 上学路线 ——动态规划 Lucas定理 中国剩余定理
    HDU 1423 Greatest Common Increasing Subsequence ——动态规划
    BZOJ 3309 DZY Loves Math ——莫比乌斯反演
    POJ 1038 Bugs Integrated, Inc. ——状压DP
    POJ 3693 Maximum repetition substring ——后缀数组
    POJ 2699 The Maximum Number of Strong Kings ——网络流
    POJ 2396 Budget ——有上下界的网络流
    BZOJ 4650 [Noi2016]优秀的拆分 ——后缀数组
    源码安装python
  • 原文地址:https://www.cnblogs.com/aidixie/p/10252484.html
Copyright © 2011-2022 走看看