Sass&Compass学习笔记(一)
1.sass中可以使用变量
$company-blue: #1875e7;
h1#brand {
color: $company-blue;
}
#sidebar {
background-color: $company-blue;
}
ul.nav {float: right}
ul.nav li {float: left;}
ul.nav li a {color: #111}
ul.nav li.current {font-weight: bold;}
ul.nav {
float: right;
li {
float: left;
a {
color: #111;
}
&.current {
font-weight: bold;
}
}
}
#header ul.nav {
float: right;
}
#header ul.nav li {
float: left;
margin-right: 10px;
}
#footer ul.nav {
margin-top: 1em;
}
#footer ul.nav li {
float: left;
margin-right: 10px;
}
@mixin horizontal-list {
li {
float: left;
margin-right: 10px;
}
} #header ul.nav {
@include horizontal-list;
float: right;
}
#footer ul.nav {
@include horizontal-list;
margin-top: 1em;
}
//混合器传参使用
@mixin horizontal-list($spacing: 10px) { //$spacing的默认值为10px,如果不传参则使用此值;
li {
float: left;
margin-right: $spacing;
}
} #header ul.nav {
@include horizontal-list; //使用$spacing默认值,即10px;
float: right;
}
#footer ul.nav {
@include horizontal-list(20px); //赋予$spacing新值为20;
margin-top: 1em;
}
//使用继承@extend,避免重复输出
.error {
border: 1px #f00;
background: #fdd;
}
.error.intrusion {
font-size: 1.2em;
font-weight: bold;
}
.badError {
@extend .error;
border-width: 3px;
}
.error, .badError {
border: 1px #f00;
background: #fdd;
}
.error.intrusion,
.badError.intrusion {
font-size: 1.2em;
font-weight: bold;
}
.badError {
border-width: 3px;
}
%button-reset {
margin:;
padding: .5em 1.2em;
text-decoration: none;
cursor: pointer;
}
.save {
@extend %button-reset;
color: white;
background: #blue;
}
.delete {
@extend %button-reset;
color: white;
background: red;
}
.save, .delete {
margin:;
padding: .5em 1.2em;
text-decoration: none;
cursor: pointer;
}
.save {
color: white;
background: #blue;
}
.delete {
color: white;
background: red;
}
Sass&Compass学习笔记(一)的更多相关文章
- sass,compass学习笔记总结
最近在进行百度前端技术学院的任务,知道自己基础薄弱,可没想到弱到这种地步,同时在安装各种软件的同时遇到了各种坑,查阅了各种资料,一个个解决的时候也发现自己凌乱了.学习总结,在脑海中形成自己的学习系统才 ...
- sass个人学习笔记
Materliu 在慕课的视频: http://www.imooc.com/learn/364 . http://www.imooc.com/wiki/371 sass入门:http://www.w3 ...
- sass的学习笔记
sass初学入门笔记(一) 我本身是个新手,一边学sass一边记下的笔记,可能有点罗嗦,但是复习起来的话还是比较全面直观的.当然,最重要的还是去实践,实践得真理 其它 CSS 预处理器语言: CSS ...
- Sass和Compass学习笔记系列之Sass
最近在慕课网学习Sass和Compass,学习链接地址:https://www.imooc.com/learn/364,现在整理笔记如下: 一.使用Sass和Compass的优点: a.使用Sass和 ...
- compass Sprites 雪碧图 小图片合成[Sass和compass学习笔记]
demo 源码 地址 https://github.com/qqqzhch/webfans 什么是雪碧图? CSS雪碧 即CSS Sprites,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法 ...
- Sass和compass 安装 和配合grunt实时显示 [Sass和compass学习笔记]
demo 下载http://vdisk.weibo.com/s/DOlfkrAWjkF/1401192855 为什么要学习Sass和compass ?提高站独立和代码产品化的绝密武器,尤其是程序化cs ...
- 学习Sass 的基本语法规则[Sass和compass学习笔记]
自从发现可编程的css语法 Sass和基于Sass的css库compass 一个给我的感觉像c# 另外一个给我的感觉像.NET Framework,一切都为了提升开发效率和降低开发大型web的门槛. ...
- Sass之Compass学习笔记
compass Compass是Sass的工具库,就好像jQuery是js的库一样. sass有了compass的配合,就会更加事半功倍. Sass本身只是一个编译器,Compass在它的基础上,封装 ...
- compass reset和layout [Sass和compass学习笔记]
reset 可以重置浏览器的的html的默认样式,因为各个浏览器对有些元素解析差别很大 通过重置样式可以让样式的浏览器兼容 更简单 使用方法简单 @import "compass/reset ...
随机推荐
- Codeforces Round #353 (Div. 2) C Money Transfers
题目链接: http://www.codeforces.com/contest/675/problem/C 题意: 给一个数组,每个数与他相邻的数相连,第一个与最后一个相连,每个数的数值可以左右移动, ...
- .Net自带的委托类型—Func,Action 和 Predicate
委托是一个类,它定义了方法的类型,使得可以将方法当作另一个方法的参数来进行传递. 与其他的类不同,委托类具有一个签名,并且它只能对与其签名匹配的方法进行引用. 一.自定义委托类型 1.语法结构:访问修 ...
- Hibernate联合主键映射
1.联合主键的映射规则 1) 类中的每个主键属性都对应到数据表中的每个主键列. Hibernate要求具有联合主键的实体类实现Serializable接口,并且重写hashCode与equals方法, ...
- sql注入分类
Sql注入根据数据提取通道的类型,从服务器接收到的响应等可以分为不同的类型. 基于从服务器接收到的响应 ▲基于错误的SQL注入 ▲联合查询的类型 ▲堆查询注射 ▲SQL盲注 •基于布尔SQL盲注 •基 ...
- MapReduce数据流向分析
MR数据流向示意图 步骤 1 输入文件从HDFS流向Mapper节点.在一般情况下,map所需要的数据就存在本节点,这就是数据本地化计算的优势,但是往往集群中数据分布不均衡(1000台节点,数据冗余度 ...
- 利用dsniff的tcpkill杀TCP连接
利用dsniff的tcpkill杀TCP连接 Linux连接久久不能释放的现象不常见,但偶然也会发生.进程虽不复存在,但是客户端的连接咬定青山不放松,死活也不肯吐出连接,导致重启进程时因操作系统判断监 ...
- DotNetBar之SupergridControl显示图片,行距自动调整
DotNetBar第三方控件SupergridControl中显示图片 1.设置SuperGridControl: SuperGridControl的GridColumn的EditorType设置为: ...
- HDU1542 Atlantis(矩形面积并)
#pragma warning (disable:4996) #include<iostream> #include<cstring> #include<string&g ...
- NDK 编译可执行程序
以Hello Android工程为例. 建立好工程hello-a,在jni目录下创建文件hello-a.c,文件内容如下.(注意是jni目录,使用src目录编译会出错) #include <st ...
- python编写规范
一.说明 二.内容 1. 代码布局 1.1 缩进 1.2 表达式和语句中的空格 1.3 行的最大长度 1.4 空行... 1.5 编码... 2. 语句... 2.1 标准头部... 2.2 导入(i ...