使用scss不但可以实现选择器的嵌套,属性也可以进行嵌套。

  首先看一段代码实例:

nav {
border-style: solid;
border-width: 1px;
border-color: #ccc;
}

  在scss看来,上面的代码也是可以进行简化的,代码如下:

nav {
border: {
style: solid;
width: 1px;
color: #ccc;
}
}

  规则如下:

  (1)把属性名从中划线-的地方断开。

  (2)在根属性后边添加一个冒号:紧跟一个块,把子属性部分写在这个{ }块中。

  再来看一段代码实例:

nav {
border: 1px solid #ccc;
border-left: 0px;
border-right: 0px;
}

  上面的css代码可以使用scss改造如下:

nav {
border: 1px solid #ccc {
left: 0px;
right: 0px;
}
}

scss-嵌套属性的更多相关文章

  1. 【Head First Servlets and JSP】笔记22:直接从请求到JSP & 获取Person的嵌套属性

    直接从请求到JSP,不经过servlet <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  2. spring BeanWrapperImpl方便的嵌套属性(list)操作

    beans 包主要提供了接口和类用于处理java beans.     其中最主要的接口是BeanWrapper:     Spring 的中心接口,用于访问javabeans 的低层操作.默认实现为 ...

  3. ActiveRecord Nested Atrributes 关联记录,对嵌套属性进行CURD

    设置了Nested attributes后,你可以通过父记录来更新/新建/删除关联记录. 使用: #accepts_nested_attributes_for class method. 例如: cl ...

  4. 动态生成具有嵌套属性的linq选择(select)

    class SelectItem { public string Item { get; set; } } class SelectList { public int ID { get; set; } ...

  5. sass基础篇

    scss的语法非常简单: $color: red; div{ color: $color; } 这就是一个简单的scss代码. 但是,使用 Sass 进行开发,那么是不是直接通过“<link&g ...

  6. scss 初学笔记 一 变量声明 默认的样式 嵌套

    $width: 300px !default; $:          变量声明符号; width:    变量名称; 300px:   赋予变量的值; !default  代表默认样式 !defau ...

  7. 前端编码规范(4)—— CSS 和 Sass (SCSS) 规范

    CSS and Sass (SCSS) style rules ID and class naming ID和class(类)名总是使用可以反应元素目的和用途的名称,或其他通用名称.代替表象和晦涩难懂 ...

  8. SCSS(SASS、CSS)学习

    看的这篇文章 http://www.frostsky.com/2014/07/sass-scss/ 写的还比较清晰 SASS是CSS3的一个扩展,增加了规则嵌套.变量.混合.选择器继承等等.通过使用命 ...

  9. Sass变量、嵌套

    声明变量定义变量的语法Sass 的变量包括三个部分: 声明变量的符号“$” 变量名称 赋予变量的值简单的示例,假设你的按钮颜色可以给其声明几个变量: $brand-primary : darken(# ...

  10. scss 学习笔记

    由于没有办法在网络上找到适合顾客的模板,同时之前自己写css也没有很好的管理方式,最终选择了scss. Nested #main p { color: #00ff00; width: 97%; .re ...

随机推荐

  1. Unity---动画系统学习(1)---在状态机中简单控制物体运动

    1. 介绍 新建一个GameObject-Cube,在Window下添加Animation(快捷键ctrl+6).会添加用于播放动画的三个东西.物体上的Animator组件.Animator Cont ...

  2. select和epoll的实现

    select:fd_set是输入结果参数,每次select之后,还得重置fd_set (1)使用copy_from_user从用户空间拷贝fd_set到内核空间,第一步需要复制所有感兴趣的文件描述符到 ...

  3. mtd-util

    1.1.4.1. mtd-util简介 mtd-util,即mtd的utilities,是mtd相关的很多工具的总称,包括常用的mtdinfo,flash_erase, flash_eraseall, ...

  4. 25.Remove Nth Node From End of List(删除链表的倒数第n个节点)

    Level:   Medium 题目描述: Given a linked list, remove the n-th node from the end of list and return its ...

  5. AR资料汇总学习

    ARKit 从入门到精通 http://www.chinaar.com/ARKit/5210.html ARKit 框架的学习 http://blog.csdn.net/biangabiang/art ...

  6. 洛谷 [TJOI2010]中位数

    题目链接 题解 比较水.. 常见套路,维护两个堆 Code #include<bits/stdc++.h> #define LL long long #define RG register ...

  7. window环境下安装Python2和Python3

    一.  python 安装 1. 下载安装包 https://www.python.org/ftp/python/2.7.14/python-2.7.14.amd64.msi # 2.7安装包 htt ...

  8. Qt随笔 - QSettings

    QSettings类提供了持久的跨平台应用程序设置. 嗯,一句话概括QSettings-- 创建 来看一下原型: QSettings::QSettings(const QString &org ...

  9. Scala 中 for 循环 和 generator 的使用例子

    这个例子是,从每个list中,找到age最大的那个node. class Node(vName: String, vAge: Int) { // Entity class var name: Stri ...

  10. vim的多窗口功能与环境参数设置

    Vim的多窗口功能 多窗口情况下按键功能 :sp [filename] 打开一个新的窗口,如果有加filename,表示在新窗口打开一个新文件,否则表示两个窗口为同一文件内容 :[ctrl]+w+j( ...