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 ...
随机推荐
- Unity---动画系统学习(1)---在状态机中简单控制物体运动
1. 介绍 新建一个GameObject-Cube,在Window下添加Animation(快捷键ctrl+6).会添加用于播放动画的三个东西.物体上的Animator组件.Animator Cont ...
- select和epoll的实现
select:fd_set是输入结果参数,每次select之后,还得重置fd_set (1)使用copy_from_user从用户空间拷贝fd_set到内核空间,第一步需要复制所有感兴趣的文件描述符到 ...
- mtd-util
1.1.4.1. mtd-util简介 mtd-util,即mtd的utilities,是mtd相关的很多工具的总称,包括常用的mtdinfo,flash_erase, flash_eraseall, ...
- 25.Remove Nth Node From End of List(删除链表的倒数第n个节点)
Level: Medium 题目描述: Given a linked list, remove the n-th node from the end of list and return its ...
- AR资料汇总学习
ARKit 从入门到精通 http://www.chinaar.com/ARKit/5210.html ARKit 框架的学习 http://blog.csdn.net/biangabiang/art ...
- 洛谷 [TJOI2010]中位数
题目链接 题解 比较水.. 常见套路,维护两个堆 Code #include<bits/stdc++.h> #define LL long long #define RG register ...
- window环境下安装Python2和Python3
一. python 安装 1. 下载安装包 https://www.python.org/ftp/python/2.7.14/python-2.7.14.amd64.msi # 2.7安装包 htt ...
- Qt随笔 - QSettings
QSettings类提供了持久的跨平台应用程序设置. 嗯,一句话概括QSettings-- 创建 来看一下原型: QSettings::QSettings(const QString &org ...
- Scala 中 for 循环 和 generator 的使用例子
这个例子是,从每个list中,找到age最大的那个node. class Node(vName: String, vAge: Int) { // Entity class var name: Stri ...
- vim的多窗口功能与环境参数设置
Vim的多窗口功能 多窗口情况下按键功能 :sp [filename] 打开一个新的窗口,如果有加filename,表示在新窗口打开一个新文件,否则表示两个窗口为同一文件内容 :[ctrl]+w+j( ...