使用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. MyBatis与JDBC的对比

    //JDBC的步骤,1.加载驱动.2.获取连接.3.执行sql语句.4.处理结果集.5.关闭资源 Class.forName("com.mysql.jdbc.Driver").ne ...

  2. hadoop集群配置方法---mapreduce应用:xml解析+wordcount详解---yarn配置项解析

    注:以下链接均为近期hadoop集群搭建及mapreduce应用开发查找到的资料.使用hadoop2.6.0,其中hadoop集群配置过程下面的文章都有部分参考. hadoop集群配置方法: ---- ...

  3. HDU6396 (贪心+fread 挂)

    题意:初始值你有k个属性的攻击vi,有n个怪兽,每个怪兽有k种属性的血量ai,并且有k种属性的加成bi,当你的k种属性的值全部大于等于某只怪兽的k种属性的血量,你可以杀死他,并且你的攻击力vi会升级, ...

  4. ZOJ - 2676 01分数规划 浮点ISAP

    题意:求最小割集\(C\),使得\(\frac{\sum_{i∈C} cost_i}{|C|}\)最小 模型就是01分数规划\(\frac{\sum_{i=1}^{m}cost_i*x}{\sum_{ ...

  5. 将M个客服随机分配给N个客户

    class AllocUser { //客户多于客服 public static void Test() { var customers = new List<Customer>() { ...

  6. C# 通用区间类

    public class Zone<T> where T : IComparable<T> { /// <summary> /// .ctor /// </s ...

  7. [转] Java 使用Try-with-resources自动关闭资源

    [From] https://blog.csdn.net/wtopps/article/details/71108342 Try-with-resources Try-with-resources是J ...

  8. DenyHosts 阻止SSH暴力攻击

    当你的 Linux 服务器暴露在互联网之中,该服务器将会遭到互联网上的扫描软件进行扫描,并试图猜测SSH登录口令. 你会发现,每天会有多条SSH登录失败纪录.那些扫描工具将对你的服务器构成威胁,你必须 ...

  9. Chess

    # coding=utf-8 import pandas as pd import numpy as np from sklearn import cross_validation import te ...

  10. element-ui多选框reserve-selection指定row-key保留数据更新之前的数据

    element-UI 的table表格数据有提供多项框的功能,只要在表格列中多加一列就可以选择表格的数据 但是有时候表格的数据是有分页的,分页一般是要重新请求后台数据,这样上一页也就是上一次请求的数据 ...