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 ...
随机推荐
- UML 用例图,时序图,活动图的定义以及区别
1.用例图,时序图,活动图的定义 1.用例图: 用例图描述了系统提供的一个功能单元.用例图的主要目的是帮助开发团队以一种可视化的方式理解系统的功能需求,包括基于基本流程的"角色" ...
- 设计模式之观察者模式(Observer)
观察者模式原理:当有新的消息产生时发送给观察者,和中介者模式的不同地方是中介者模式强调中介的作用以及中介双方的交互,观察者模式是主动调用观察者成员函数进行消息发送. 代码如下: #include &l ...
- Dynamic Programming - Part2
实现如下: public static void main(String[] args) { String squence1 = "ABCBDAB"; String squence ...
- std::vector<Channel2*> m_allChannels;容器,以及如何根据channelid的意义
std::vector<Channel2*> m_allChannels;容器,以及如何根据channelid的意义 这个容器保存了所有客户端连接的channel Channel2* Li ...
- IP分片浅析
在TCP/IP分层中,数据链路层用MTU(Maximum Transmission Unit,最大传输单元)来限制所能传输的数据包大小,MTU是指一次传送的数据最大长度,不包括数据链路层数据帧的帧头, ...
- Codeforces Round #216 (Div. 2)解题报告
又范低级错误! 只做了两题!一道还被HACK了,囧! A:看了很久!应该是到语文题: 代码:#include<iostream> #include<]; ,m2=; ;i ...
- Yahoo, Steve blog
Performance Research Domain Sharding revisited A Software Developer's Guide to HTTP How the Browser ...
- hadoop开发环境-----eclipse
1.eclipse下载 http://www.eclipse.org/downloads/packages/eclipse-ide-java-ee-developers/lunasr1 2.hadoo ...
- pyhton Chapter3 读文件
使用内置函数open()打开文件,data=open("1.txt").利用data.close()关闭文件.利用data.readline()读取文件中的一行数据,然后指示读取文 ...
- windbg内核诊断方式--转载
一.WinDbg是什么?它能做什么? WinDbg是在windows平台下,强大的用户态和内核态调试工具.它能够通过dmp文件轻松的定位到问题根源,可用于分析蓝屏.程序崩溃(IE崩溃)原因,是我们日常 ...