暂时使用的是:Koala,监测转义
$fff: #ffffff;
$red:red;
h1{
color: $fff;
}
简单调用
#content{
color: $fff;
.con{
content: $red;
}
}
或者:
#content,#nei{
a{
color: $fff;
}
}
#content a{color: #fff; }
#nei a{color: #fff; }
嵌套(css里面嵌套要复制什么的,挺麻烦)
#content a{
color: $fff;
&:hover{
color: $red;
}
}
或者:
#content a{
color:$fff;
body.ie &{
color: $red
}
}
//当body的class为ie的时候,#content a的颜色为red颜色
&是父级标识符~
article{
~article{border-top: 1px dashed #ccc }
>section{background: #eee }
dl>{
dt{color: #333 }
dd{color: #555 }
}
nav+ & {margin-top: 0 }
}
article ~article{border-top: 1px dashed #ccc }
article>section{background: #eee }
article dl>dt{color: #333 }
article dl>dd{color: #555 }
nav+article{margin-top: 0 }
nav{
border:{
color:$fff;
style:solid;
width:1px;
}
}
编译出来后:nav{ border-style: solid; border-width: 1px; border-color: #ccc;}
还有中嵌套方法:
nav{
border:red solid 1px {
left:0px;
right:0px;
}
}
编译出来就是: nav { border: 1px solid #ccc; border-left: 0px; border-right: 0px; }
注:sass的变量是可覆盖的,也就是说可以重复,后面的覆盖前面的
$fancybox-width: 400px !default;
defult相当于css里的!important,不过!defult是应用于变量的,且,其含义是,如果该变量已声明赋值,则无效,否则,就用这个defult的值,也就是设置变量默认值
sass支持局部导入,即是在css规则内导入:例:
a{
background:red;
color:blue;
}
上面这个是theme.scss的内容
.content{
@import "theme";
//只有在content这个类内才会使用theme.scss的样式
}
输出结果:
.content a{
background:red;
color:blue;
}
sass中导入css不会用,
sass中的注释相关:
/*这种注释编译后会显示在css中*/
//这种注释编译后只会显示在scss中而不会显示到css中
body { color /* 这块注释内容不会出现在生成的css中 */: #333; padding: 1; /* 这块注释内容也不会出现在生成的css中 */ 0;}
混合器
@mixin name{
border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
}
.btn{
background:red;
@include name;
}
输出为:
.btn{
background:red;
border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
}
这种写法的话好在公用模块,以后调用起来相同样式会很轻松,不过一般是用来处理hack的
还有种技巧是:
@mixin ulPublic{
color:red;
li{
color:blue;
}
}
ul{
@include ulPublic;
}
输出是:
ul {
color: red;
}
ul li {
color: blue;
}
还有下面这种写法:
@mixin olpublic($defult,$hover,$active ){
li a{
color: $defult;
&:hover {color: $hover};
&:active {color: $active };
}
}
ol{
@include olpublic(red,yellow,green);
}
输出:
ol li a {
color: red;
}
ol li a:hover {
color: yellow;
}
ol li a:active {
color: green;
}
(感觉有了sass会快捷很多,同时也会增加模块化的概念)
下面的写法是模块化公用:
@mixin module(
$normal,
$hover: $normal,
$link: $normal
)
{
color: $normal;
&:hover{color:$hover}
&:link{color:$link}
}
.module span{
@include module(yellow);
}
输出为:
.module span {
color: yellow;
}
.module span:hover {
color: yellow;
}
.module span:link {
color: yellow;
}
统一调用
注:混合选择器不仅包含css规则,也包含选择器和选择器中的属性
继承@extend
@mixin name{
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
-o-border-radius:5px;
-ms-border-radius:5px;
}
.btn{
background: $fff;
color: $fff;
border: $borderNo;
@include name;
}
.extend span{
@extend .btn;
}
会输出:
.btn, .extend span {
background: #7abbff;
color: #7abbff;
border: none;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
}
继承比较高级的应用:
直接继承元素原生属性。。。(不对,只能继承自己写的)
注释:最常用的一种高级用法是继承一个html
元素的样式。尽管默认的浏览器样式不会被继承,因为它们不属于样式表中的样式,但是你对html
元素添加的所有样式都会被继承
- SASS语法备忘
sass语法 关于sass 3.3.0更新说明——3.3.0 sublime相关插件为:scss语法高亮,sass语法高亮,编译,保存即编译,格式化 文件后缀名 sass有两种后缀名文件:一种后缀名为 ...
- SQL[连载2]语法及相关实例
SQL[连载2]语法及相关实例 SQL语法 数据库表 一个数据库通常包含一个或多个表.每个表由一个名字标识(例如:"Websites"),表包含带有数据的记录(行). 在本教程中, ...
- Vue项目中sass语法该怎么用?
最近开始着手Vue框架,被各种报错蹂躏,其中有一个就是sass语法,<style>标签中添加<style lang="scss">,发现报错,在网上找了一些 ...
- JSON解析实例——使用Json-lib
JSON解析实例——使用Json-lib Json-lib下载及使用 本文介绍用一个类库进行JSON解析. 工具下载地址:http://sourceforge.net/projects/json-li ...
- 为sublime text2 添加SASS语法高亮
以前写CSS时,都是直接写样式,没有任何的第三方工具,后面发现越是面向大网站,越难管理,上次参加完携程UED大会后,发现SASS对于前端团队多人协作和站点代码维护上很有帮助,很多同学都开始用了,我还是 ...
- Solr系列五:solr搜索详解(solr搜索流程介绍、查询语法及解析器详解)
一.solr搜索流程介绍 1. 前面我们已经学习过Lucene搜索的流程,让我们再来回顾一下 流程说明: 首先获取用户输入的查询串,使用查询解析器QueryParser解析查询串生成查询对象Query ...
- JavaScript中hoisting(悬置/置顶解析/预解析) 实例解释,全局对象,隐含的全局概念
JavaScript中hoisting(悬置/置顶解析/预解析) 实例解释,全局对象,隐含的全局概念 <html> <body> <script type="t ...
- pcapng文件的python解析实例以及抓包补遗
为了弥补pcap文件的缺陷,让抓包文件可以容纳更多的信息,pcapng格式应运而生.关于它的介绍详见<PCAP Next Generation Dump File Format> 当前的w ...
- 1-3 Sass 语法、编译、调试
Sass 语法格式 这里说的 Sass 语法是 Sass 的最初语法格式,他是通过 tab 键控制缩进的一种语法规则,而且这种缩进要求非常严格.另外其不带有任何的分号和大括号.常常把这种格式称为 Sa ...
随机推荐
- ACE在windows下的编译及配置(VS2010)
ACE在windows下的编译及配置(VS2010) 分类: -[小西南]- 2013-08-06 16:17 2354人阅读 评论( ...
- HTTP入门
请求报文图解: 请求报文 图片 响应报文图解: 响应报文
- Centos 7系统优化脚本
脚本如下,后续继续优化 #!/bin/bash #author junxi by #this script is only for CentOS 7.x #check the OS platform= ...
- Sqlserver将数据从一张表插入到另一张表
1.如果是整个表复制表达如下: insert into table1 select * from table2 2.如果是有选择性的复制数据表达如下: insert into table1(colum ...
- CentOS7上安装FTP服务
---------------------------------------------------------------------------------------------------- ...
- MySQL的BlackHole引擎在主从架构中的作用
MySQL在5.x系列提供了Blackhole引擎–“黑洞”. 其作用正如其名字一样:任何写入到此引擎的数据均会被丢弃掉, 不做实际存储:Select语句的内容永远是空. 和Linux中的 /dev/ ...
- Egret学习笔记 (Egret打飞机-2.开始游戏)
打开 Egret Wing,新建一个Egret游戏项目,然后删掉默认生成的createGameScene方法里面的东西 然后新建一个BeginScene.ts的文件,作为我们的游戏的第一个场景 cla ...
- aforge 学习-命名空间中文理解
序列 名称 介绍 1 Aforge AForge AForge名称空间的核心名称空间.微软网络框架,其中包含核心类所使用的其他框架的命名空间和类,可以独立用于各种用途. 2 AForge.Cont ...
- mex (离散化+线段树)
Time Limit: 3000 ms Memory Limit: 256 MB Description 给你一个无限长的数组,初始的时候都为0,有3种操作: 操作1是把给定区间$[l,r]$设为 ...
- Python接口测试,Requests模块讲解:GET、POST、Cookies、Session等
文章最下方有对应课程的视频链接哦^_^ 一.安装.GET,公共方法 二.POST 三.Cookies 四.Session 五.认证 六.超时配置.代理.事件钩子 七.错误异常