compass&sass高级应用

2016-10-28 10:26:45来源:oschina作者:Billydotzhang人点击

第七城市

一./*背景知识*/
1.Sass是什么?


  Sass可以简化你的Css工作流,并可以使你的Css的扩展和维护工作变的更加容易!例如,曾几时何,因为客户的需求的变更,你必须不断的通过查找和替换来更改一个像素值,或者,为了能够确定多栏布局中某一栏的宽度,你需要使用计算像素值软件才能搞定。   Sass引入了一些新的概念如,变量,混合,嵌套和选择器继承.Sass 生成良好格式化的 CSS 代码,易于组织和维护。   SASS是对CSS3(层叠样式表)的语法的一种扩充,它可以使用巢状、混入、选择子继承等功能,可以更有效有弹性的写出Stylesheet。   Sass最后还是会编译出合法的CSS让浏览可以使用,也就是说它本身的语法并不太容易让浏览器识别(虽然它和CSS的语法非常的像,几乎一样),因为它不是标准的CSS格式,在它的语法内部可以使用动态变量等,所以它更像一种极简单的动态语言。


2.Compass是什么?


  Compass由SASS的核心团队成员Chris Eppstein创建,是一个非常丰富的样式框架,包括大量定义好的mixin,函数,以及对SASS的扩展。


二./*Sass和Compass安装*/

// SASS是Ruby语言写的,但是两者的语法没有关系。不懂Ruby,照样使用。只是必须先安装Ruby,然后再安装SASS。


// 假定你已经安装好了Ruby,接着在命令行输入下面的命令:


1.gem安装Sass
C:/Users/DELL>gem install sass
2.查看Sass版本
C:/Users/DELL>sass -v
Sass 3.4.13 (Selective Steve)
3.编译Sass文件
sass main.scss main css
// 一般很少使用sass命令,一般都是用Compass命令;
4.gem安装Compass
C:/Users/DELL>gem install compass
5.查看Compass版本
C:/Users/DELL>compass -v
Compass 1.0.3 (Polaris)
6.Compass搭建项目
C:/Users/DELL/compass create sass
// 结果:↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 5 directory sass/
directory sass/sass/// sass文件所在目录;
directory sass/stylesheets/// css文件所在目录;
create sass/config.rb// 项目配置文件;
create sass/sass/screen.scss// 主要针对屏幕的sass文件;
create sass/sass/print.scss // 主要针对打印设备;
create sass/sass/ie.scss// 主要针对IE浏览器;
write sass/stylesheets/ie.css
write sass/stylesheets/print.css
write sass/stylesheets/screen.css // scss文件编译后对应的css文件;最终将引入到HTML中的文件;
// You may now add and edit sass stylesheets in the sass subdirectory of your project.
// 你现在可以在sass文件的子文件中(screen.scss/print.scss/ie.scss)添加和编辑项目的样式表;
// Sass files beginning with an underscore are called partials and won't be compiled to CSS, but they can be imported into other sass stylesheets.
// Sass文件以"_"开头的叫做局部文件,不会被编译成CSS;但它们可以被引入到其他Sass文件中;
// You can configure your project by editing the config.rb configuration file.
// 你可以通过编辑config.rb配置文件来配置项目信息;
// You must compile your sass stylesheets into CSS when they change.
// 当Sass文件被修改后,必须要编译Sass文件到CSS;
// 1. To compile on demand: // 直接编译;
// compass compile [path/to/project]
// 2. To monitor your project for changes and automatically recompile:
// compass watch [path/to/project] // 监听项目变化并且自动编译;
// To import your new stylesheets add the following lines of HTML (or equivalent) to your webpage:
//
//
//
//
//
// 将编译后的文件引入到HTML页面中;
三./*Sass语法基础*/
1.scss和sass文件转换
sass-convert main.scss main.sass
// 将scss文件转换为sass文件;
2.开启监听编译
C:/Users/DELL>cd sass
// 进入项目文件夹;
C:/Users/DELL/sass>compass watch
>>> Compass is watching for changes. Press Ctrl-C to Stop.
// 开启监听并自动编译;
3.变量
// Sass通过"$"声明变量;
>1.声明变量
$headline-ff:"宋体",Arial,sans-serif;
$main-sec-ff:Arial,sans-serif;
>2.引用变量
.headline {
font-family: $headline-ff;
}
.main-sec {
font-family: $main-sec-ff;
}
4.@import引入文件
>1.新建局部文件
_variables.scss
// 以"_"开头的局部文件,不会被编译到css;作为引入文件使用;
>2.@import引入文件
@improt "variables";
// 基于Sass的既定规则:
// 1.没有文件后缀名的时候,sass会添加.scss或.sass的后缀;
// 2.用同一目录下,局部文件和非局部文件不能重名;
>3.使用css原生@import的既定规则:
>>1.当@import后边跟的文件名是以".css"结尾的时候;
>>2.当@import后边跟的是"http://"开头的字符串的时候;
>>3.当@import后边跟的是一个url()函数的时候
>>4.当@import后边带有media queries的时候;
5.注释
>1.以"/**/"注释的内容最后被输出到了对应的css文件中;
>2.以"//"注释的内容则没有输出到对应的css文件;
6.类嵌套语法
.main-sec{
font-family: $main-sec-ff;
.headline {
font-family: $main-sec-ff;
}
}
7.属性嵌套语法
.headline {
font:{
family:$main-sec-ff;
size:16px;
}
}
8.父类选择器(自身调用)
a {
&:hover {
color:red;
}
}
四./*Sass进阶语法*/
1.变量操作
>1.直接操作变量,即变量表达式;
>2.通过函数;
>>1.跟代码块无关的函数,多是自己内置函数,称为functions;
>>2.可重用的代码块:称为mixin;
>>>1.@include;// 以复制/拷贝的方式存在;
>>>2.@extend; // 以组合声明的方式存在;
2.颜色值转换;
Sass:
color:hsl(270,100%,50%);
Css:
color:#7f00ff;
3.@mixin引用
Sass:
@mixin col-6 { // 声明col-6()函数;
width:50%;
float:left;
}
.webdemo-sec {
@include col-6 // 通过@include引入@col-6()函数;并且可以引入多个;
&:hover {// &:表示父类选择器;
background-color:#f5f5f5;
}
}
Css:
.webdemo-sec { // 继承了col-6()函数的属性值;
width:50%;
float:left;
}
.webdemo-sec:hover {// 通过"&"调用到本身;
background-color:#f5f5f5;
}
4.@mixin包含参数引用;
Sass:
@mixin col($width:50%){// 设置默认参数值;不传参数时,属性值为默认;
width:$width;
float:right;
}
.webdemo-abc {
@include col(60%);// 设置传参数;
}
Css:
.webdemo-abc {
width:60%;// 编译后的属性值;
float:right;
}
5.@extend继承
>1.extend不可以继承选择器序列;
>2.使用%,用来构建只用来继承的选择器;
Sass:
.error {
color:#f00;
}
%error { // 构建只用来要继承的选择器;
background:#0f0;
}
.serious-error {
@extend .error;
@extend %error;
border:1px solid #f00;
}
Css:
.error, .serious-error { // 继承自.error;
color:#f00;
}
.serious-error {// 继承自%serious-error;
background:#0f0;
}
.serious-error {// 自己的属性;
border:1px solid #f00;
}
五./*Sass高级语法*/
1.@media用法
// Sass中的@media与Css中的@media区别:
// 1.Sass中的media query可以内嵌在css规则中;
// 2.在生成css的时候,media query才会被提到样式的最高级;
// 3.好处:避免了重复书写选择器或者打乱样式表的流程;
Sass:
@mixin col-sm ($width:50%){
@media (min-width:768px){
width:$width;
float:left;
}
}
.webdemo-sec {
@include col-sm();
}
Css:
@media (min-width:768px){
.webdemo-sec {
width:50%;
float:left;
}
}
2.@at-root指令
// 嵌套副作用:增加了样式修饰的权重;制造了样式位置的依赖;
Sass:
.main-sec {
font-size:12px;
@at-root { // 在嵌套的时候使用@at-root指令;
.main-sec-headline { // 指定被嵌套的内容输出到样式表的顶层;
font-size:16px;
}
.main-sec-detail {
font-size:14px;
}
}
}
Css:
.main-sec {
font-size:12px;
}
.main-sec-headline {         // 编译后成功输出到样式表的顶层;
font-size:16px;
}
.main-sec-detail {
font-size:14px;
}
3.if操作符
@mixin col-sa ($width:50%){
// 使用type-of()方法:检测$width是否是数值类型;
@if type-of($width) != number {
// #{}:可以引用Sass的变量;--Ruby语法;
// @error:表示错误信息;
@error "$width必须是一个数值类型,你输入的width是:#{$width}.";
}
// 使用unitless()方法:判断当前的数值是否跟有单位;
// 前置not表示否定,双重否定表示肯定;
@if not unitless($width){// 判断数值有单位;
@if unit($width) != "%" {// 如果单位不是%;
@error "$width必须是一个数值类型,你输入的width是:#{$width}.";
}
} @else { // 判断数值没有单位;
@warn "$width必须是一个数值类型,你输入的width是:#{$width}.";
$width:(percentage($width)/100);// 换算成带%单位的数值;
}
@media (min-width:768px){
width:$width;
float:left;
}
}
4.Sass的输出格式
// 在config.rb配置文件里;
>1.output_style = :expanded or :nested or :compact or :compressed
>>0.:expanded => 编译后的文件是展开的;
>>1.:nested => 根据嵌套,在输出的时候代码缩进;
>>2.:compact=> 将所有的属性汇总到一行;选择器之间的关系更清晰;
>>3.:compressed => 将所有的代码压缩以占用最小的空间;
第七城市

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台