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 ...
随机推荐
- 1.线性回归、Logistic回归、Softmax回归
本次回归章节的思维导图版总结已经总结完毕,但自我感觉不甚理想.不知道是模型太简单还是由于自己本身的原因,总结出来的东西感觉很少,好像知识点都覆盖上了,但乍一看,好像又什么都没有.不管怎样,算是一次尝试 ...
- 老男孩Day14作业:堡垒机
一.作业需求: 1.业务需求 兼顾业务安全目标与用户体验,堡垒机部署后,不应使用户访问业务系统的访问变的复杂,否则工作将很难推进,因为没人喜欢改变现状,尤其是改变后生活变得更艰难 保证堡垒机稳 ...
- n阶行列式算法(c程序)
#include<stdio.h> #include<math.h> #define N 100 //N比输入的阶数大即可 int main() { int n,a[N][ ...
- SDUT OJ 数据结构实验之链表八:Farey序列
数据结构实验之链表八:Farey序列 Time Limit: 10 ms Memory Limit: 600 KiB Submit Statistic Discuss Problem Descript ...
- mysql的唯一索引UNIQUE
创建唯一索引的目的不是为了提高访问速度,而只是为了避免数据出现重复.唯一索引可以有多个但索引列的值必须唯一,索引列的值允许有空值.如果能确定某个数据列将只包含彼此各不相同的值,在为这个数据列创建索引的 ...
- Could not get lock /var/lib/apt/lists/lock
执行: apt-get update 出现 Could not get lock /var/lib/apt/lists/lock 解决办法: 查询与apt相关的进程 ps -e | grep apt ...
- bootstrap表单控件
禁用状态: 被禁用的 fieldset 为<fieldset> 设置 disabled 属性,可以禁用 <fieldset> 中包含的所有控件. <form> &l ...
- Python闭包需要注意的问题
定义 python中的闭包从表现形式上定义为:如果在一个内部函数里,对在外部作用域(但不是在全局作用域)的变量进行引用,那么内部函数就被认为是闭包(closure),也就是说内层函数引用了外层函数 ...
- js中的slice和splic
一:slice 的用法 slice() 用于数组方法可从已有的数组中返回选定的元素,也就是在该方法中指定的元素.该方法不会改变原数组,,返回值是一个新的数组. 选取的范围是 从 当前位(0) 开始(索 ...
- POJ1077 Eight A*
这个题扔到A*可也还行... 定义估价函数h():为每个数或空格的位置 到 最终状态中所在位置 的 曼哈顿距离 的 总和. 把状态压成一个九进制数,便于存储和判重. 然后记录方案可以记录一下此次的操作 ...