scss-嵌套属性
使用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-嵌套属性的更多相关文章
- 【Head First Servlets and JSP】笔记22:直接从请求到JSP & 获取Person的嵌套属性
直接从请求到JSP,不经过servlet <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
- spring BeanWrapperImpl方便的嵌套属性(list)操作
beans 包主要提供了接口和类用于处理java beans. 其中最主要的接口是BeanWrapper: Spring 的中心接口,用于访问javabeans 的低层操作.默认实现为 ...
- ActiveRecord Nested Atrributes 关联记录,对嵌套属性进行CURD
设置了Nested attributes后,你可以通过父记录来更新/新建/删除关联记录. 使用: #accepts_nested_attributes_for class method. 例如: cl ...
- 动态生成具有嵌套属性的linq选择(select)
class SelectItem { public string Item { get; set; } } class SelectList { public int ID { get; set; } ...
- sass基础篇
scss的语法非常简单: $color: red; div{ color: $color; } 这就是一个简单的scss代码. 但是,使用 Sass 进行开发,那么是不是直接通过“<link&g ...
- scss 初学笔记 一 变量声明 默认的样式 嵌套
$width: 300px !default; $: 变量声明符号; width: 变量名称; 300px: 赋予变量的值; !default 代表默认样式 !defau ...
- 前端编码规范(4)—— CSS 和 Sass (SCSS) 规范
CSS and Sass (SCSS) style rules ID and class naming ID和class(类)名总是使用可以反应元素目的和用途的名称,或其他通用名称.代替表象和晦涩难懂 ...
- SCSS(SASS、CSS)学习
看的这篇文章 http://www.frostsky.com/2014/07/sass-scss/ 写的还比较清晰 SASS是CSS3的一个扩展,增加了规则嵌套.变量.混合.选择器继承等等.通过使用命 ...
- Sass变量、嵌套
声明变量定义变量的语法Sass 的变量包括三个部分: 声明变量的符号“$” 变量名称 赋予变量的值简单的示例,假设你的按钮颜色可以给其声明几个变量: $brand-primary : darken(# ...
- scss 学习笔记
由于没有办法在网络上找到适合顾客的模板,同时之前自己写css也没有很好的管理方式,最终选择了scss. Nested #main p { color: #00ff00; width: 97%; .re ...
随机推荐
- maven项目运行找不到类的错误
Maven项目 eclipse工具 错误: [INFO] -------------------------------------------------------------[ERROR] CO ...
- java集合之Set接口
Set集合通常不能记住元素添加的顺序,其他的操作和它的父接口基本相同.只是行为上有细微的差别,Set集合不能包含相同的元素.如果尝试添加相同的元素,调用add()方法将返回false,且新元素不能被加 ...
- JAVA GET 和 POST 的区别
GET 和 POST 的区别 GET请注意,查询字符串(名称/值对)是在 GET 请求的 URL 中发送的:/test/demo_form.asp?name1=value1&name2=val ...
- Spring学习笔记(六)—— SSH整合
一.整合原理 二.整合步骤 2.1 导包 [hibernate] hibernate/lib/required hibernate/lib/jpa 数据库驱动 [struts2] struts-bla ...
- CentOS 7 安装中网络设置111
如果在安装过程中需要使用网络,需要启动网卡,默认是DHCP 点击configure进入设置 General 常规设置 Automatically connect to this network whe ...
- Win10 修改 开始 菜单样式..
因为不是平板,所以改成了这个样子 下面说步骤... 打开 菜单栏位置... 将快捷方式 拷贝到 里面 来... 快捷方式 以 #开头.是为了 让其排列在最前面.... 快捷方式有个技巧...快捷方式 ...
- Oj 24260: Lilypad Pond (神奇广搜题,状态搜索)
题目 为了让奶牛们娱乐和锻炼,约翰建造了一个美丽的池塘.这个池塘是矩形的,可以分成M×N个方格.一些格子是坚固得令人惊讶的莲花,还有一些是岩石,其余的只是美丽,纯净,湛蓝的水.贝西正在练习芭蕾舞,她站 ...
- python中各进制之间的转换
偶然翻看进制转换的内容.这里简单做一个记录吧. #十进制转换二进制 >>> bin() '0b1010' #十进制转换十六进制 >>> hex() '0xa' #二 ...
- filezilla绑定编辑器
编辑 - >设置 ->文件格式关联 ->输入需要关联的编辑器的路径
- [转] JAVA从本机获取IP地址
[From] https://www.cnblogs.com/xiaoBlog2016/p/7076230.html 论述: 此篇博客是在工作的时候,需要获得当前网络下面正确的ip地址,在网上查阅很多 ...