使用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. http2.2使用ajp与tomcat集成

    环境 1.CENTOS 6.5 2.yun安装的httpd,版本是2.2 3.tomcat版本8.5.28 操作 关闭8080端口连接,打开8009端口修改tomcat_home/conf/serve ...

  2. 用IDM下载博客图片

    前言 写博客的人一定都会有一个图床,将图片存在那里.发现自己以前没有注意图片来源问题,随手就贴在博客上面了.现在有不少图片都挂了,换句话来说有可能自己目前用的图床不提供服务了,那所有的图片都有可能丢失 ...

  3. 洛谷 P1155 【NOIP2008】双栈排序

    题目链接 题解 这题有点神啊.. 我们仔细观察一下,发现两个栈内元素必须为降序 那么有结论 如果有\(i < j < k\) 且 \(a[k] < a[i] < a[j]\)则 ...

  4. 石头剪刀布(2019Wannafly winter camp day3 i) 带权并查集+按秩合并 好题

    题目传送门 思路: 按照题意描述,所有y挑战x的关系最后会形成一棵树的结构,n个人的总方案数是 3n 种,假设一个人被挑战(主场作战)a次,挑战别人(客场)b次,那么这个人存活到最后的方案数就是3n* ...

  5. XAML 绑定和结构体不得不说的问题

    遇见一个问题 如果用一个结构体struct.再用一个ListView,然后使用绑定. <Window x:Class="WpfApp1.MainWindow" xmlns=& ...

  6. python内置函数一

    ⼀. 本节主要内容:1. 内置函数 什么是内置函数? 就是python给你提供的. 拿来直接⽤的函数, 比如print., input等等. 截⽌到python版本3.6.2 python⼀共提供了6 ...

  7. 选择IM云服务供应商

    选择IM云服务供应商,其实最重要是有三个因素:费用.技术稳定性.以及后续运维服务. 对于不少创业公司来讲,可能需要找到成本和稳定性的最佳平衡点.目前国内不少IM云服务产品都推出了免费服务项目或者一定期 ...

  8. JAVA 序列化_基础

    JAVA序列化 实现 Serializable 接口的对象,可以序列化为本地文件 简单示例: //序列化类 public class Test implements Serializable { pr ...

  9. PIE SDK矢量数据空间索引的创建

    1. 功能简介 空间索引的使用便于数据的查询:所以在创建矢量数据的时候创建空间索引,下面对矢量数据如何创建空间索引进行功能介绍. 2. 功能实现说明 2.1. 实现思路及原理说明 第一步 创建矢量要素 ...

  10. PIXI 宝物猎人(7)

    介绍 ,本实例来自官网 代码结构 打开 treasureHunter.html 文件,你将会看到所有的代码都在一个大的文件里.下面是一个关于如何组织所有代码的概览: //Setup Pixi and ...