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 ...
随机推荐
- numpy.histogram 官方手册
numpy.histogram numpy.histogram(a, bins=10, range=None, normed=False, weights=None, density=None) Co ...
- 了解一个名词——GTD
概念:就是Getting Things Done的缩写,翻译过来就是“把事情做完”,是一个管理时间的方法. 核心理念概括:就是必须记录下来要做的事,然后整理安排并使自己一一去执行. 五个核心原则是:收 ...
- SDUT OJ 数据结构实验之链表九:双向链表
数据结构实验之链表九:双向链表 Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Discuss Problem Descrip ...
- HTML5 indexedDb 数据库
indexedDb 数据库 上一节中,我们知道了,HMTL5中内置了两种本地数据库,一种是通过SQL语言来访问的文件型SQL数据库被称为“SQLLite,另一种是是被称为indexedDB 的数据 ...
- Tomcat 配置文件的解析
转载:https://www.cnblogs.com/sunshine-1/p/8990044.html https://www.cnblogs.com/kismetv/p/7228274.html ...
- java的长字符串转化为短字符串
public class CustomEncrypt{ public static void main( String[] args ) { /* * c#给的正确测试用例: id=>mid * ...
- CentOS7下php安装mcrypt扩展
https://blog.csdn.net/skykingf/article/details/40185405 以下步骤均为本人实际操作,可能与你的安装方法有所区别,但我会尽量排除疑惑) 大致步骤(1 ...
- fis中的数据结构模块Config
/* * config * caoke */ 'use strict'; Object.extend=function(props){ //继承父类 var prototype=Object.crea ...
- Flask项目出现html文件无法自动补全
默认情况下我们使用Pycharm专业版创建一个Flask项目时就会自动创建一个简单的项目结构,Pycharm会自动关联起文件的语法,模版等.而自己手动创建的文件并没有关联起来.这就会出现上面说的无法补 ...
- 3---Django rest framework源码分析(3)----节流
Django rest framework源码分析(3)----节流 目录 添加节流 自定义节流的方法 限制60s内只能访问3次 (1)API文件夹下面新建throttle.py,代码如下: # u ...