Sass和Compass入门

一.前言

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 1.gem安装Sass
 2   C:\Users\DELL>gem install sass
 3
 4 2.查看Sass版本
 5   C:\Users\DELL>sass -v
 6   Sass 3.4.13 (Selective Steve)
 7
 8 3.编译Sass文件
 9   sass main.scss main css
10   // 一般很少使用sass命令,一般都是用Compass命令;
11
12 4.gem安装Compass
13   C:\Users\DELL>gem install compass
14
15 5.查看Compass版本
16   C:\Users\DELL>compass -v
17   Compass 1.0.3 (Polaris)

 1 6.Compass搭建项目
 2   C:\Users\DELL\compass create sass
 3   // 结果:↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 5   directory sass/
 6   directory sass/sass/                  // sass文件所在目录;
 7   directory sass/stylesheets/           // css文件所在目录;
 8      create sass/config.rb              // 项目配置文件;
 9      create sass/sass/screen.scss       // 主要针对屏幕的sass文件;
10      create sass/sass/print.scss        // 主要针对打印设备;
11      create sass/sass/ie.scss           // 主要针对IE浏览器;
12       write sass/stylesheets/ie.css
13       write sass/stylesheets/print.css
14       write sass/stylesheets/screen.css // scss文件编译后对应的css文件;最终将引入到HTML中的文件;
15
16   // You may now add and edit sass stylesheets in the sass subdirectory of your project.
17   // 你现在可以在sass文件的子文件中(screen.scss/print.scss/ie.scss)添加和编辑项目的样式表;
18
19   // 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.
20   // Sass文件以"_"开头的叫做局部文件,不会被编译成CSS;但它们可以被引入到其他Sass文件中;
21
22   // You can configure your project by editing the config.rb configuration file.
23   // 你可以通过编辑config.rb配置文件来配置项目信息;
24
25   // You must compile your sass stylesheets into CSS when they change.
26   // 当Sass文件被修改后,必须要编译Sass文件到CSS;
27
28   // 1. To compile on demand:                   // 直接编译;
29   // compass compile [path/to/project]
30   // 2. To monitor your project for changes and automatically recompile:
31   // compass watch [path/to/project]            // 监听项目变化并且自动编译;
32
33   // To import your new stylesheets add the following lines of HTML (or equivalent) to your webpage:
34   // <head>
35   //   <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
36   //   <link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" />
37   //   <!--[if IE]>
38   //       <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
39   //   <![endif]-->
40   // </head>
41   // 将编译后的文件引入到HTML页面中;

三.Sass语法基础

 1 1.scss和sass文件转换
 2   sass-convert main.scss main.sass
 3   // 将scss文件转换为sass文件;
 4
 5 2.开启监听编译
 6 C:\Users\DELL>cd sass
 7 // 进入项目文件夹;
 8 C:\Users\DELL\sass>compass watch
 9 >>> Compass is watching for changes. Press Ctrl-C to Stop.
10 // 开启监听并自动编译;
11
12 3.变量
13   // Sass通过"$"声明变量;
14   >1.声明变量
15     $headline-ff:"宋体",Arial,sans-serif;
16     $main-sec-ff:Arial,sans-serif;
17   >2.引用变量
18     .headline {
19       font-family: $headline-ff;
20     }
21     .main-sec {
22       font-family: $main-sec-ff;
23     }
24
25 [email protected]引入文件
26   >1.新建局部文件
27     _variables.scss
28     // 以"_"开头的局部文件,不会被编译到css;作为引入文件使用;
29   >[email protected]引入文件
30     @improt "variables";
31     // 基于Sass的既定规则:
32     // 1.没有文件后缀名的时候,sass会添加.scss或.sass的后缀;
33     // 2.用同一目录下,局部文件和非局部文件不能重名;
34   >3.使用css原生@import的既定规则:
35     >>1.当@import后边跟的文件名是以".css"结尾的时候;
36     >>2.当@import后边跟的是"http://"开头的字符串的时候;
37     >>3.当@import后边跟的是一个url()函数的时候
38     >>4.当@import后边带有media queries的时候;
39
40 5.注释
41   >1.以"/**/"注释的内容最后被输出到了对应的css文件中;
42   >2.以"//"注释的内容则没有输出到对应的css文件;
43
44 6.类嵌套语法
45   .main-sec{
46     font-family: $main-sec-ff;
47     .headline {
48       font-family: $main-sec-ff;
49     }
50   }
51
52 7.属性嵌套语法
53   .headline {
54     font:{
55       family:$main-sec-ff;
56       size:16px;
57     }
58   }
59
60 8.父类选择器(自身调用)
61   a {
62     &:hover {
63       color:red;
64     }
65   }

四.Sass语法进阶

 1 1.变量操作
 2   >1.直接操作变量,即变量表达式;
 3   >2.通过函数;
 4     >>1.跟代码块无关的函数,多是自己内置函数,称为functions;
 5     >>2.可重用的代码块:称为mixin;
 6       >>>[email protected];                // 以复制/拷贝的方式存在;
 7       >>>[email protected];                 // 以组合声明的方式存在;
 8
 9 2.颜色值转换;
10   Sass:
11     color:hsl(270,100%,50%);
12   Css:
13     color:#7f00ff;
14
15 [email protected]引用
16   Sass:
17     @mixin col-6 {                   // 声明col-6()函数;
18       width:50%;
19       float:left;
20     }
21     .webdemo-sec {
22       @include col-6                 // 通过@include引入@col-6()函数;并且可以引入多个;
23       &:hover {                      // &:表示父类选择器;
24         background-color:#f5f5f5;
25       }
26     }
27   Css:
28     .webdemo-sec {                   // 继承了col-6()函数的属性值;
29       width:50%;
30       float:left;
31     }
32     .webdemo-sec:hover {             // 通过"&"调用到本身;
33       background-color:#f5f5f5;
34     }
35
36 4.@mixin包含参数引用;
37   Sass:
38     @mixin col($width:50%){           // 设置默认参数值;不传参数时,属性值为默认;
39       width:$width;
40       float:right;
41     }
42     .webdemo-abc {
43       @include col(60%);              // 设置传参数;
44     }
45   Css:
46     .webdemo-abc {
47       width:60%;                      // 编译后的属性值;
48       float:right;
49     }
50
51 [email protected]继承
52   >1.extend不可以继承选择器序列;
53   >2.使用%,用来构建只用来继承的选择器;
54   Sass:
55     .error {
56       color:#f00;
57     }
58     %error {                          // 构建只用来要继承的选择器;
59       background:#0f0;
60     }
61     .serious-error {
62       @extend .error;
63       @extend %error;
64       border:1px solid #f00;
65     }
66   Css:
67     .error, .serious-error {          // 继承自.error;
68       color:#f00;
69     }
70     .serious-error {                  // 继承自%serious-error;
71       background:#0f0;
72     }
73     .serious-error {                  // 自己的属性;
74       border:1px solid #f00;
75     }

五.Sass高级语法

 1
 2 [email protected]用法
 3 // Sass中的@media与Css中的@media区别:
 4 // 1.Sass中的media query可以内嵌在css规则中;
 5 // 2.在生成css的时候,media query才会被提到样式的最高级;
 6 // 3.好处:避免了重复书写选择器或者打乱样式表的流程;
 7   Sass:
 8     @mixin col-sm ($width:50%){
 9       @media (min-width:768px){
10         width:$width;
11         float:left;
12       }
13     }
14     .webdemo-sec {
15       @include col-sm();
16     }
17   Css:
18     @media (min-width:768px){
19       .webdemo-sec {
20         width:50%;
21         float:left;
22       }
23     }
24
25 [email protected]指令
26 // 嵌套副作用:增加了样式修饰的权重;制造了样式位置的依赖;
27   Sass:
28     .main-sec {
29       font-size:12px;
30       @at-root {                        // 在嵌套的时候使用@at-root指令;
31         .main-sec-headline {            // 指定被嵌套的内容输出到样式表的顶层;
32           font-size:16px;
33         }
34         .main-sec-detail {
35           font-size:14px;
36         }
37       }
38     }
39   Css:
40     .main-sec {
41       font-size:12px;
42     }
43     .main-sec-headline {         // 编译后成功输出到样式表的顶层;
44       font-size:16px;
45     }
46     .main-sec-detail {
47       font-size:14px;
48     }
49
50 3.if操作符
51   @mixin col-sa ($width:50%){
52       // 使用type-of()方法:检测$width是否是数值类型;
53       @if type-of($width) != number {
54           // #{}:可以引用Sass的变量;--Ruby语法;
55           // @error:表示错误信息;
56           @error "$width必须是一个数值类型,你输入的width是:#{$width}.";
57       }
58
59       // 使用unitless()方法:判断当前的数值是否跟有单位;
60       // 前置not表示否定,双重否定表示肯定;
61       @if not unitless($width){             // 判断数值有单位;
62           @if unit($width) != "%" {         // 如果单位不是%;
63               @error "$width必须是一个数值类型,你输入的width是:#{$width}.";
64           }
65       } @else {                             // 判断数值没有单位;
66           @warn "$width必须是一个数值类型,你输入的width是:#{$width}.";
67           $width:(percentage($width)/100);  // 换算成带%单位的数值;
68       }
69       @media (min-width:768px){
70           width:$width;
71           float:left;
72       }
73   }
74
75 4.Sass的输出格式
76 // 在config.rb配置文件里;
77   >1.output_style = :expanded or :nested or :compact or :compressed
78     >>0.:expanded   => 编译后的文件是展开的;
79     >>1.:nested     => 根据嵌套,在输出的时候代码缩进;
80     >>2.:compact    => 将所有的属性汇总到一行;选择器之间的关系更清晰;
81     >>3.:compressed => 将所有的代码压缩以占用最小的空间;

时间: 2024-10-07 23:09:18

Sass和Compass入门的相关文章

邂逅Sass和Compass之Compass篇

本文主要讲解Compass的内容,众所周知Compass是Sass的工具库,如果对Sass不甚了解的同学可以移步 邂逅Sass和Compass之Sass篇 Sass本身只是一个"CSS预处理器",Compass在它的基础上,封装了一系列的模块和模板,补充了Sass的功能. 1.Compass的安装 和Sass一样,Compass也是用Ruby语言开发的,所以在安装Sass之前必须先安装Ruby,安装Ruby的过程就不再赘述,安装好Ruby后可以直接在命令行输入下面的命令 sudo ge

compass reset和layout [Sass和compass学习笔记]

reset 可以重置浏览器的的html的默认样式,因为各个浏览器对有些元素解析差别很大 通过重置样式可以让样式的浏览器兼容 更简单 使用方法简单 @import "compass/reset" layout 有几个常见的布局函数,我觉得挺管用,其他的都是用来写组建非常常用的 Sticky Footer 该模块提供了需要布置你的页脚,它坚持到页面底部的工具. 这个模块主要用于布局页脚,可以让页脚固定在页面的最底部,是一个比较常用的功能,而且有配套的html代码 引用方法 @import

分享15款很实用的 Sass 和 Compass 工具

Sass 是 CSS 的扩展,增加了嵌套规则,变量,混入功能等很多更多.它简化了组织和维护 CSS 代码的成本.Compass 是一个开源的 CSS 框架,使得使用 CSS3 和流行的设计模式比以往任何时候都更容易. 在这篇文章中,我们已经收集了一组有用的 Sass 和 Compass 工具,将帮助您快速构建 Web 应用程序. 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScri

[已读]Sass与Compass实战

介绍了Sass基础语法与Compass框架,这个网上参考文档就OK了,另外介绍了compass生成图片精灵和相应的css,貌似现在单纯用sass和compass的挺少,要不grunt,要不FIS,而grunt和FIS貌似都有自己的图片精灵方案(好吧,我都没用过)?所以,这本书也没什么必要看了→ →

揭开Sass和Compass的神秘面纱

可能之前你像我一样,对Sass和Compass毫无所知,好一点儿的可能知道它们是用来作为CSS预处理的.那么,今天请跟我一起学习下Sass和Compass的一些基础知识,包括它们是什么.如何安装.为什么要使用.基础语法等一些基本知识.需要说明的是我也仅仅只是刚刚接触Sass和Compass,一些高级用法等将不再本文的讨论范围之内.接触一周以后发现Sass和Compass的用处非常大,也打算今后在项目中尝试引进并应用起来.希望读完以后,你跟我一样对Sass和Compass给你带来的东西非常开心,也

compass General 常用api学习[Sass和compass学习笔记]

compass 中一些常用api 包括一些浏览器hack @import "compass/utilities/general" Clearfix Clearfix 是用来清除浮动 float 造成的内容问题,以前用clear 方法可以解决,通过查看Clearfix 的源码发现对与高版本的浏览器其实已经可以不用了 ? 1 2 3 4 @mixin clearfix {   overflow: hidden;   @include has-layout; } 用overflow 就可以了

rub、sass和compass的安装

长话短说,直接进入正题. [ruby安装] ruby下载网址:http://rubyinstaller.org/downloads/ 选择适合自己电脑的版本: 下载完成后直接双击安装,记得勾选加入环境变量: 安装完成后打开命令行,输入 ruby -v 命令,如果能看到版本号说明安装成功了: ========================================= [sass安装] ruby自带一个分叫做RubyGems的系统,用来安装基于ruby的软件.用gem命令我们可以轻松的安装s

opensuse13.2安装 sass和compass

首先要先安装ruby 和 gem如果使用sudo zypper install ruby 安装后 当安装sass时会报错 /System/Library/Frameworks/Ruby.framework/Versions/1.8/usr/bin/ruby  extconf.rb  mkmf.rb can't find header files for ruby at  /System/Library/Frameworks/Ruby.framework/Versions/1.8/usr/lib/

安装Ruby、Sass与Compass

sass基于Ruby语言开发而成,因此安装sass前需要安装Ruby.(注:mac下自带Ruby无需在安装Ruby!) window下安装SASS首先需要安装Ruby,先从官网下载Ruby并安装.安装过程中请注意勾选Add Ruby executables to your PATH添加到系统环境变量. 安装完ruby之后,在开始菜单中,找到刚才我们安装的ruby,打开Start Command Prompt with Ruby. 安装完成后需测试安装有没有成功,在命令行中输入:ruby -v 如