sass对象的定义

sass在3.3引入map类型,它与JS的对象非常相似,它有两种定义模式。外面都是用小括号括括起来,每个键值对可以像JS那样与逗号分开。不同之后是,键名与键值之间的冒号不是 必须的

不用对象的情况

@charset "utf-8";//必须设置了这个才能编译有中文的注释

//创建一个核心的颜色
$bravo_gray: #333;

// 将创建的核心颜色分配给一个有语义化的变量
$input-disabled-color:          $bravo_gray;

$input-disabled-background:     lighten($input-disabled-color, 75%);
$input-disabled-border:         lighten($input-disabled-color, 50%);
$input-disabled-text:           lighten($input-disabled-color, 50%);

input[disabled] {
  background-color: $input-disabled-background;
  border-color: $input-disabled-border;
  color: $input-disabled-text;
}
//-------------------------
input[disabled] {
  background-color: #f2f2f2;
  border-color: #b3b3b3;
  color: #b3b3b3; }

使用对象的情况

@charset "utf-8";//必须设置了这个才能编译有中文的注释

//创建一个核心的颜色
$bravo_gray: #333;

// 将创建的核心颜色分配给一个有语义化的变量
$input-disabled-color:          $bravo_gray;
//键名与键值之间没有冒号,此为旧语法
$input: (
  disabled-background lighten($input-disabled-color, 75%),
  disabled-border lighten($input-disabled-color, 50%),
  disabled-text lighten($input-disabled-color, 50%)
);

input[disabled] {
  background-color: map-get($input, disabled-background);
  border-color: map-get($input, disabled-border);
  color: map-get($input, disabled-text);
}
//-------------------------
input[disabled] {
  background-color: #f2f2f2;
  border-color: #b3b3b3;
  color: #b3b3b3; }

可以看到层次感更强了

我们再加上冒号试试

@charset "utf-8";//必须设置了这个才能编译有中文的注释

//创建一个核心的颜色
$bravo_gray: #333;

// 将创建的核心颜色分配给一个有语义化的变量
$input-disabled-color:          $bravo_gray;
//键名与键值之间没有冒号
$input: (//这是新语法
  disabled-background: lighten($input-disabled-color, 75%),
  disabled-border: lighten($input-disabled-color, 50%),
  disabled-text: lighten($input-disabled-color, 50%)
);

input[disabled] {
  background-color: map-get($input, disabled-background);
  border-color: map-get($input, disabled-border);
  color: map-get($input, disabled-text);
}
//-------------------------
input[disabled] {
  background-color: #f2f2f2;
  border-color: #b3b3b3;
  color: #b3b3b3; }

我们再认真看一下$input这东西,其实它的键名可以设计得更整齐统一的,那么下方我们就可以直接循环了。


@charset "utf-8";//必须设置了这个才能编译有中文的注释

//创建一个核心的颜色
$bravo_gray: #333;

// 将创建的核心颜色分配给一个有语义化的变量
$input-disabled-color:          $bravo_gray;
//键名与键值之间没有冒号
$input: (
disabled-background-color: lighten($input-disabled-color, 75%),
disabled-border-color: lighten($input-disabled-color, 50%),
disabled-color: lighten($input-disabled-color, 50%)
);
input[disabled]{
    $arr: background-color border-color  color;
    @each $name in $arr{
        #{$name}:map-get($input, disabled-#{$name})
    }
}

我们可以将$input设计得更简洁些,去掉杂质,更名为$disabled-input。然后利用@each可以同时遍历出键名与键值的技巧,将它精简到极致。

@charset "utf-8";//必须设置了这个才能编译有中文的注释

//创建一个核心的颜色
$bravo_gray: #333;

// 将创建的核心颜色分配给一个有语义化的变量
$input-disabled-color:          $bravo_gray;
//键名与键值之间没有冒号

$disabled-input: (
    background-color: 75%,
    border-color: 50%,
    color: 25%
);
input[disabled]{
    @each $key, $val in $disabled-input{
        #{$key}:lighten($input-disabled-color,  $val);
    }
}

有了冒号,方便我们定义深层沟的对象。

$var: (
    key: (
        key: value,
        key: value,
        key: (
            key: value,
            key: value
        )
    )
);

上面的$disabled-input可改成

$input: (
    disabled: (
        background-color: 75%,
        border-color: 50%,
        color: 25%
    )
);
//这里定义更多有用方法
//https://github.com/lunelson/sass-list-maps/blob/master/_sass-list-maps.scss

sass对象的定义

时间: 2024-10-14 15:59:17

sass对象的定义的相关文章

java问题:类的定义,对象的定义?

java问题:类的定义,对象的定义? 类是一组数据和函数的集合,只是抽象的概念,它的作用就是生成对象,它生成对象后,就为这个对象分了一块存储区,类可以生成无限多个对象,每个对象都有自己的存储区,在类里定义的数据和函数在这个对象里都有了.在Java当中,对象是一个类的实体.

获取创建SQL Server对象的定义文本

引用自<SQL Server 2012 Internals> "   As views, these metadata objects are based on an underlying Transact-SQL (T-SQL) defnition. The most straightforward way to see the defnition of these views is by using the object_defnition function. (You can

Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象。

Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象. 语法EDIT Object.defineProperty(obj, prop, descriptor) 参数 obj 需要定义属性的对象. prop 需定义或修改的属性的名字. descriptor 将被定义或修改的属性的描述符. 返回值 返回传入函数的对象,即第一个参数obj 描述EDIT 该方法允许精确添加或修改对象的属性.一般情况下,我们为对象添加属性是通过

JavaScript作用域、上下文环境、函数对象的定义与调用、匿名函数的定义与调用、闭包

提到闭包总给人很高深的感觉,网上的例子也数不胜数.但是我发现相当一部分并不容易理解.根据我的观察,是因为这些例子把标题中提到的概念糅杂在了一起,往往越看越糊涂.所以我希望化整为零,拆成简单例子来解释. 1.先看作用域: JavaScript作用域只有两种--全局作用域和函数内作用域,没有代码块作用域.示例: function loop(){ for(var i=0;i<5;i++){ //doSomething; } alert(i); } loop(); //执行函数结果为5. 尽管变量i已经

OpenERP对象字段定义的详解

OpenERP对象支持的字段类型有,基础类型:char, text, boolean, integer, float, date, time, datetime, binary:复杂类型:selection, function, related:关系类型:one2one, one2many, many2one, many2many.下面逐一说明. boolean: 布尔型(true, false) integer: 整数. float: 浮点型,如 'rate' : fields.float('

2015-3-29 Java 类,对象的定义与用用法

1,什么是类? 答:类是客观存在的,抽象的,概念的东西. 2,什么是对象? 答:对象是具体的,实际的,代表一个事物.例如:车是一个类,汽车,自行车就是他的对象. 关于类与对象的描述:类是对象的模版,对象是类的一个个体. 3,Java中定义类的方法? class 类名 用Java语法定义人类: public class Person { } 4,对象的定义方法? 1,对象声明:类名 对象名: 2,对象创建 对象名 =  new 类名(): new作用:分配内存空间. 也可以合写为:类名 对象名 =

c++总结之类型,对象的定义和声明,对象的初始化和赋值

一.对象的类型 对象的类型决定了对象占用内存空间的大小,和内存的布局,内存中可存储值的范围以及对该对象可以进行的操作,由于对象的类型决定可以对其执行的操作,因此const属性也可以看做对象类型的组成部分.类型又分为静态类型和动态类型,对于普通对象,静态类型和动态类型一般是一致的:对于指针和引用类型,静态类型和动态类型可以相同也可以不同,静态类型是指针和引用定义时声明的类型,而动态类型是指程序运行时实际绑定的类型.当静态类型和动态类型不同时,一般来说有两种情况:一是指涉到常量的指针和引用绑定了一个

对象属性定义方法

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible"

类和对象的定义

类和对象的定义 1.属性--对象具有的各种特征 2.每个对象的每个属性都拥有特定值 ① 例如:张浩和李明的年龄.姓名不一样 3.方法--对象执行的操作 4.对象:用来描述客观事物的一个实体,由一组属性和方法构成 5.对象同时具有属性和方法两种特性 对象的属性和方法通常被封装在一起,共同体现事物的特性,二者相辅相成,不能分割 6.类定义了对象将会拥有的特征(属性)和行为(方法) 7.类是对象的类型,对象是类的实例 原文地址:https://www.cnblogs.com/chenhuanghuib