zoukankan      html  css  js  c++  java
  • sass学习(2)——关于变量

    定义一个sass变量

    可以说,变量是一个编程语言的基础。所以对于sass来说,变量肯定是浓墨重彩的其中一笔,当然函数也是。那我们如何声明定义一个sass的变量呢?

    1. 变量的符号$
    2. 变量名称
    3. 变量的值

    那我们看一下如何使用变量

    $color: white;
    
    body{
    	color: $color;	
    }
    
    div{
    	color: $color;
    }
    

    就是这么简单,当然这个例子很简单,所以暂时看不出它所带来的非凡的效果。

    全局变量与局部变量

    global

    sass中的变量也是分为全局与局部的,在代码块内声明的变量只会在代码块内生效,除非为其添加了!global。前面关于全局和局部变量,学过一点js的都应该懂,这里就不再赘述。我们直接看看如何在局部变量里声明一个全局的变量。

    $color: white;
    
    body{
    	$partial-color: black !global; //若没有!global则会报错,无法编译
    	$color: red;
    }
    
    div{
    	color: partial-color;
    	color: $color; //编译后仍然是white,说明并未收到上一个代码块的影响
    }
    
    default

    当然还有一个类似的命令是!default,直接根据语意即可知,它是说明变量值为默认值。任何的值都可以覆盖默认值,即使默认值出现在后面。

    $color: red;
    $color: blue !default;
    body{
    	color: $color //编译后为red
    }
    

    这个default对于组件化的开发是有很大的帮助的,大家也可以思考思考。非default值出现在后面,则是普通的覆盖。若是出现在前面,则是sass自动编译,使用非default值来覆盖default。这个操作会让组件化开发的时候,更易于控制。

    特殊变量

    一般变量的值是属性值,我们可以拿来直接用。但是如果变量的值是属性名的话,我们就需要使用一个特殊的表达式#{$variab},可以直接看个例子。

    $white-color: white;
    $black-color: black;
    
    body{
    	.div-#{$white-color}: $white-color;
    	.div-#{$black-color}: $black-color;	
    }
    
    ------编译后------
    body {
      .div-white: white;
      .div-black: black; 
    }
    

    这个功能可是十分有用啊,这样我们就可以很舒服的通过变量来控制属性名了。

    &操作符

    个人感觉&操作符在javascript里,和this指针差不多。这个怎么说呢,就是&变量会自动转化成父层的元素,这样在某些地方可以大有好处,尤其是伪元素。直接来看看例子吧。

    $base-color: black;
    $hover-color: red;
    
    .btn{
    	color: $base-color;
    
    	&:hover{
    		color: $hover-color;	
    	}
    }
    ------编译后------
    .btn {
      color: black; 
    }
      .btn:hover {
        color: red; 
    }
    

    巧妙利用&操作符,会让我们使用起来更加灵活,自如。

    多值变量

    这种变量可也真是让人涨姿势,分为list变量和map变量。对应javascript来说,也就是数组和对象。下面一一来简单介绍一下。

    list

    list中的值,可以用三种形式来区分,空格、逗号还有小括号。其中若灵活混用,则可以做成类似二维数组的变量,如[['white', 'black'] ['red', 'blue']]。那使用什么办法取值呢,sass提供了一个nth($variable, index)的方法。一起来看看吧。

    $color: white black red blue;
    
    a{
    	color: nth($color, 2);
    	&:hover{
    		color: nth($color, 4);
    	}
    }
    
    ------编译后------
    a {
      color: black; 
    }
    a:hover {
      color: blue; 
    }
    

    是不是非常的酷!这样可以让我们的变量更加灵活。当然list数据的操作也有非常的自带的函数,想要更多了解的也可以自行查阅。

    map

    其实map也是大同小异,只是map是根据key和value做更多更自由的事情。这里我就引用一下别人的例子,我觉得这个例子是十分有特色的,也可以省下非常多的时间。

    $headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
    @each $header, $size in $headings {
      #{$header} {
        font-size: $size;
      }
    }
    
    ------编译后------
    h1 {
      font-size: 2em; 
    }
    h2 {
      font-size: 1.5em; 
    }
    h3 {
      font-size: 1.2em; 
    }
    

    这里也看到了一个内置函数,@each, $header和$size,则分别代表着循环过程中的key和value。相信大家也是能看得出来的。我们通过一个map,可以如此简洁的定义好三个相似的样式,多让人舒心。


    关于sass常用的变量,也差不多讲完了。语法的学习,必须配合实际操作。如果大家对sass感兴趣,可以毫不犹豫加入其中,一定会带你给无限惊喜。

  • 相关阅读:
    js正则表达式中的问号使用技巧总结
    380. Insert Delete GetRandom O(1)
    34. Find First and Last Position of Element in Sorted Array
    162. Find Peak Element
    220. Contains Duplicate III
    269. Alien Dictionary
    18. 4Sum
    15. 3Sum
    224. Basic Calculator
    227. Basic Calculator II
  • 原文地址:https://www.cnblogs.com/YikaJ/p/4314733.html
Copyright © 2011-2022 走看看