sass和compass实战 读书笔记(一)
sass优势: 不做重复的工作
一 消除样式表冗余(通过变量赋值的方式)
1. 通过变量来复用属性值
2. 使用嵌套来快速写出多层级的选择器
3. 通过混合器来复用一段样式
4. 使用选择器继承来避免重复属性
sass通过配置文件config.rb配置文件输出路径
sass基础语法
变量声明 局部变量和全局变量的概念 css代码块中定义的变量就是局部变量
$base-border:1px solid #ccc;
$plain-font:Helvetica、"Microsoft Yahei";
变量可以套用变量
$heightLight-color: #abcedf;
$heightLight-border: 1px $heightLight-color solid;
变量命名使用中划线和下划线的结果相同
$color_btn:red;
$color-btn:green;
button{color: $color_btn;} ----编译结果---- >button{color: green;} 样式被覆盖 结果就是green
父选择器
&
.test{
color:red;
&:hover{
color:green;
}
}
--编译-->
.test{color:red;}
.test:hover{color:green;}
群组选择器的嵌套
.container{
h1, h2, h3{
margin-right:5px;
span{
color: red;
}
}
}
--编译之后---->
.container h1, .container h2, .container h3 {
margin-right: 5px;
}
.container h1 span, .container h2 span, .container h3 span {
color: red;
}
子组合选择器和同层组合选择器 > + ~
> 选择一个元素的直接子元素 article > section{border:1px solid #ccc;}
+ 同层相邻组合器 header + p{ color: red;} 紧邻header的p标签的color:red;
<header><p>我的字体不是红色的</p></header>
<p>我的字体是红色的</p>
<p>我的字体不是红色的</p>
~ 同层所有选择器 article ~section{border: 1px solid #ccc} 所有跟在article同层之后的section都修饰 在article之前的section不被渲染样式
sass的导入
@import 导入scss文件 可以全局导入和局部导入
//先定一个一个名为_blue-theme的scss局部文件
aside{
background:red;
color:white;
} //另一个文件内部
@import "blue-theme"; // 引用文件可以不带下划线 后缀名 也可以局部引入
div{
@import "blue-theme";
}
--编译生成文件-->
div{
aside{
background:red;
color:white;
}
}
混合器传参
@mixin link-colors($normal, $hover, $visited){
color: $normal;
&:hover{color: $hover;}
&:visited{color: $visited}
} div{
@include link-colors(red,black,white); //第一种方式调用
@include link-colors(
$normal:red,
$hover :black,
$visited:white
); //第二种方式调用
}
sass和compass实战 读书笔记(一)的更多相关文章
- sass与compass实战(读书笔记)
// compass create myproject // compass compile // compass compile --force 重新编译未改动的 // compass compil ...
- 机器学习实战 - 读书笔记(13) - 利用PCA来简化数据
前言 最近在看Peter Harrington写的"机器学习实战",这是我的学习心得,这次是第13章 - 利用PCA来简化数据. 这里介绍,机器学习中的降维技术,可简化样品数据. ...
- 机器学习实战 - 读书笔记(12) - 使用FP-growth算法来高效发现频繁项集
前言 最近在看Peter Harrington写的"机器学习实战",这是我的学习心得,这次是第12章 - 使用FP-growth算法来高效发现频繁项集. 基本概念 FP-growt ...
- 机器学习实战 - 读书笔记(11) - 使用Apriori算法进行关联分析
前言 最近在看Peter Harrington写的"机器学习实战",这是我的学习心得,这次是第11章 - 使用Apriori算法进行关联分析. 基本概念 关联分析(associat ...
- 机器学习实战 - 读书笔记(07) - 利用AdaBoost元算法提高分类性能
前言 最近在看Peter Harrington写的"机器学习实战",这是我的学习笔记,这次是第7章 - 利用AdaBoost元算法提高分类性能. 核心思想 在使用某个特定的算法是, ...
- iPhone与iPad开发实战读书笔记
iPhone开发一些读书笔记 手机应用分类1.教育工具2.生活工具3.社交应用4.定位工具5.游戏6.报纸和杂志的阅读器7.移动办公应用8.财经工具9.手机购物应用10.风景区相关应用11.旅游相关的 ...
- Spring实战读书笔记
Spring实战读书笔记 Spring-core Spring之旅 - DI 和 AOP 概念 spring 的Bean容器 spring 的 核心模块 Spring的核心策略 POJO 最小侵入式编 ...
- <<Java RESTful Web Service实战>> 读书笔记
<<Java RESTful Web Service实战>> 读书笔记 第一章 JAX-RS2.0入门 REST (Representational State ransf ...
- [已读]Sass与Compass实战
介绍了Sass基础语法与Compass框架,这个网上参考文档就OK了,另外介绍了compass生成图片精灵和相应的css,貌似现在单纯用sass和compass的挺少,要不grunt,要不FIS,而g ...
随机推荐
- C#Winform 自定义透明按钮和单窗体模块化实现
技术看点 WinForm自定义控件的使用 WinForm单窗体应用如何模块化 需求及效果 又来一波 C# GDI自定义控件show .这个控件已经使用几年了,最近找出来重构一下.原来是没有边框的,那么 ...
- JS CKEditor使用setData后绑定click事件
CKEditor使用setData()时会自动丢失初始时绑定的时间,在百度时发现有很多方法都不对. 近期在做项目的时候,由于客户需要,将原来的文本格式的textarea标签更改成富文本编辑器--CKE ...
- Linux 常见命令示例【一】
查看端口占用 [查看目前系统上已在监听的网络联机及其pid netstat –tlnp] 文件挂载 Linux与windows文件传输(三方软件:secureCRT, WINscp) 1)sftp S ...
- 解决html文件的DropFileName = "svchost.exe"木马
首先表示强烈谴责,没事写出这种木马来.导致开发者把时间花在解决这种问题上. 这种木马会在你全盘的html文件的最底部生成一堆vbscript代码,导致html文件变得很大.大概213kb.可以看出他就 ...
- 使用jemeter手工编写注册、登陆脚本 运用 fiddler (三)
手工注册脚本的录制 我们可以发现 编写手工脚本 需要用到两个软件一起合作才能编写成功 工作亦是如此 养成良好的团队合作精神 是必不可少的 现在我们来看手工编写注册脚本 第一步 :我们先进入网站首页 ...
- [PHP] PHP源码中的条件编译定义
根据不同情况编译不同代码.产生不同目标文件的机制,称为条件编译有这些预处理命令:#if.#elif.#else #endif :#ifdef #else #endif PHP源码: #ifdef SE ...
- BZOJ 1192: [HNOI2006]鬼谷子的钱袋(新生必做的水题)
1192: [HNOI2006]鬼谷子的钱袋 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 3557 Solved: 2596[Submit][St ...
- 洛谷 P1219 八皇后【经典DFS,温习搜索】
P1219 八皇后 题目描述 检查一个如下的6 x 6的跳棋棋盘,有六个棋子被放置在棋盘上,使得每行.每列有且只有一个,每条对角线(包括两条主对角线的所有平行线)上至多有一个棋子. 上面的布局可以用序 ...
- HDU2988-Dark roads,HDU1233-还是畅通工程-最小生成树
最小生成树: 中文名 最小生成树 外文名 Minimum Spanning Tree,MST 一个有 n 个结点的连通图的生成树是原图的极小连通子图,且包含原图中的所有 n 个结点,并且有保持图连通的 ...
- opencv+vs配环境
首先,一定要注意debug和release下配的项目设置是有区分的!!!!!!!!!!! 1.注意自己的电脑是64位还是32位 2.要在环境变量中设置环境变量,环境变量从前向后扫描,用64位环境变量时 ...