使用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. numpy.histogram 官方手册

    numpy.histogram numpy.histogram(a, bins=10, range=None, normed=False, weights=None, density=None) Co ...

  2. 了解一个名词——GTD

    概念:就是Getting Things Done的缩写,翻译过来就是“把事情做完”,是一个管理时间的方法. 核心理念概括:就是必须记录下来要做的事,然后整理安排并使自己一一去执行. 五个核心原则是:收 ...

  3. SDUT OJ 数据结构实验之链表九:双向链表

    数据结构实验之链表九:双向链表 Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Discuss Problem Descrip ...

  4. HTML5 indexedDb 数据库

    indexedDb 数据库   上一节中,我们知道了,HMTL5中内置了两种本地数据库,一种是通过SQL语言来访问的文件型SQL数据库被称为“SQLLite,另一种是是被称为indexedDB 的数据 ...

  5. Tomcat 配置文件的解析

    转载:https://www.cnblogs.com/sunshine-1/p/8990044.html https://www.cnblogs.com/kismetv/p/7228274.html ...

  6. java的长字符串转化为短字符串

    public class CustomEncrypt{ public static void main( String[] args ) { /* * c#给的正确测试用例: id=>mid * ...

  7. CentOS7下php安装mcrypt扩展

    https://blog.csdn.net/skykingf/article/details/40185405 以下步骤均为本人实际操作,可能与你的安装方法有所区别,但我会尽量排除疑惑) 大致步骤(1 ...

  8. fis中的数据结构模块Config

    /* * config * caoke */ 'use strict'; Object.extend=function(props){ //继承父类 var prototype=Object.crea ...

  9. Flask项目出现html文件无法自动补全

    默认情况下我们使用Pycharm专业版创建一个Flask项目时就会自动创建一个简单的项目结构,Pycharm会自动关联起文件的语法,模版等.而自己手动创建的文件并没有关联起来.这就会出现上面说的无法补 ...

  10. 3---Django rest framework源码分析(3)----节流

    Django rest framework源码分析(3)----节流 目录 添加节流 自定义节流的方法  限制60s内只能访问3次 (1)API文件夹下面新建throttle.py,代码如下: # u ...