sass学习笔记1 sass的helloworld
发布在前端学习笔记2015年5月7日view:2455CSSSass,Less
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

0x01. css to Sass

Sass 有两种语法,分别是*.sass*.scss

*.sass(缩进式语法)

h1
    color: #000
    background: #fff

*.scss (css的超集)

h1 {
    color: #000; 
    background: #fff
}

0x02. DRY - Don’t Repeat Yourself

2.1 Traditional CSS Code

/* 一份冗余的CSS代码 */
h1#brand {color: #1875e7}
#sidebar {background-color: #1875e7}
ul.nav {float: right}

ul.nav li {float: left;}
ul.nav li a {color: #111}
ul.nav li.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;}

在这份代码中,如果说我们需要去修改#1875e7这个颜色,需要改动两个地方,如果说代码复杂后,可能需要修改的地方就更多了。(最简单的一个需求,减少修改代码的成本)

2.2 通过变量来复用属性值

$company-blue: #1875e7;
h1#brand {
color: $company-blue;
}
#sidebar {
background-color: $company-blue;
}

变量名前加$

在这个简单的例子中,如果你想要微调蓝色阴影,只需要修改变量赋值的那一处地方,使用变量的其他地方就会自动更新。

ps:less(类似与sass),它是在变量名前使用@

2.3 使用嵌套来快速写出多层级的选择器

先看一份传统的代码

/* code-1 */
ul.nav {float: right}
ul.nav li {float: left;}
ul.nav li a {color: #111}
ul.nav li.current {font-weight: bold;}

使用sass的嵌套语法

ul.nav {
    float: right;
    li {
        float: left;
        a {
            color: #111;
        }
        &.current {
            font-weight: bold;
        }
    }
}

在终端中运行如下 sass 命令,并传入文件的路径: Sass 1.2.nesting.scss,你就能获取到code-1的代码(代码格式会有些不一样)

2.4 使用混合器来复用一段样式

2.4.1 混合器入门

一份传统代码

ul.horizontal-list li {
    float: left;
    margin-right: 10px;
}
#header ul.nav {
    float: right;
}
#footer ul.nav {
    margin-top: 1em;
}

你需要给元素 ul.nav 添加额外的类名 horizontal-list 。这种方式能够有效地工作,但如果你想要使类保持语意的同时依旧可复用,怎么实现呢?

使用sass@mixin@include 重用代码

@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;
}

sass编译生成的代码css

#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;
}

2.4.2 混合器中融合变量

sass代码

@mixin horizontal-list($spacing: 10px) {
    li {
        float: left;
        margin-right: $spacing;
    }
}
#header ul.nav {
    @include horizontal-list;
    float: right;
}
#footer ul.nav {
    @include horizontal-list(20px);
    margin-top: 1em;
}

sass编译生成的css代码

#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: 20px;
}

混合器能够让你复用一段属性,从而为你节省大量时间。不过聪明的读者或许发现了输出的样式表中有冗余,这是因为混合器在每一个被包含进来的地方,都会就地复制一段样式。别担心,Sass总留有一手。选择器继承就可以解决这个问题。

2.5 使用“选择器继承”@extend来避免重复属性

2.5.1 @extend入门

一份sass代码

.error {
    border: 1px #f00;
    background: #fdd;
}
.error.intrusion {
    font-size: 1.2em;
    font-weight: bold;
}
.badError {
    @extend .error;
    border-width: 3px;
}

.barError 继承父类 .error ,也就是复用父类的所有样式。

编译出的css代码

.error, .badError {
    border: 1px #f00;
    background: #fdd;
}
.error.intrusion,
.badError.intrusion {
    font-size: 1.2em;
    font-weight: bold;
}
.badError {
    border-width: 3px;
}

在这个例子中,同时定义了 error 和 badError 类是有意义的,因为两者都需要在HTML中使用,但有时父类并不需要在HTML中使用。于是在Sass 3.2中引入了占位选择器,它支持在使用选择器继承的同时,不编译输出HTML中并不使用的父类。

2.5.2 在选择器继承中使用占位选择器%

sass代码

%button-reset {
    margin: 0;
    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;
}

编译生成的css代码

.save, .delete {
    margin: 0;
    padding: .5em 1.2em;
    text-decoration: none;
    cursor: pointer;
}
.save {
    color: white;
    background: blue;
}
.delete {
    color: white;
    background: red;
}

占位选择器能把常用的样式保存到一处,且不影响任何一个类名,使你能够放心使用。当然如果一个占位选择器没有被继承,其中的样式就不会被编译到CSS当中,以减少生产环境中样式表的无用样式,使其更小。

2.6 Compass

2.6.1 Compass是什么

  1. Compass是一个强大的Sass框架
  2. Compass由三个主要部分组成:混合器和实用工具的类库,能够集成到应用开发环境中的开发系统,以及一个用于构建框架和扩展的平台。

2.6.2 Compass库

我的理解就是已经有很多造好的轮子等待你去使用呢。我们可以去Compass社区了解到他们。

2.6.3 简单的Compass样式项目

Sass和Compass都是用Ruby写的且起源于Ruby on Rails社区(你需要装上ruby

Compass明白你不单单是在写样式,你是在构建设计。正因为如此,Compass需要知道你在哪里存放图片、字体和JavaScript文件,以便轻松管理并在样式中引用这些文件。举例来说,Compass会自动帮你构建精灵图,并在CSS中正确引用它们;假如你通过 image-url() 辅助器引用了一个并不存在的图片,Compass会告警;Compass可以在你的CSS中内嵌必要的图片和字体,免去浏览器的一些工作。

2.6.4 创建一个Compass项目

2.6.4.1 安装Compass

  1. 安装 ruby (自己搜索怎么装吧)
  2. 安装 sass: $ gem install sass
  3. 安装 Compass: $ gem install compass

2.6.4.2 创建一个Compass项目,命名为 sample

compass create sample

2.7 Compass补充

2.7.1 reset.css (经典css代码)

/* v1.0 | 20080212 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
/* 不要忘了定义focus样式! */
:focus {
    outline: 0;
}
/* 记得通过其他修饰方式来突出新插入内容! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}
/* 同时需要在表格元素标签上添加 'cellspacing="0"' */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

2.7.2 Compass是怎么做的

你或许已经注意到Compass项目默认生成的screen.css文件了,这个文件就是基于Erics的reset脚本衍生出来的。只要通过以下代码添加它,就可以让你的样式在各个浏览器里边起点一致:

@import "compass/reset"

2.7.3 CSS global-reset 混合器

大多数Compass模块并不会无故在你的样式表中添加样式,不要让CSS重置模块误导了你,Compass重置模块位于样式表的前边,只要被引入就会执行 global-reset 这一混合器。

@mixin global-reset {
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
        @include reset-box-model;
        @include reset-font; }
    body {
        @include reset-body; }
    ol, ul {
        @include reset-list-style; }
    table {
        @include reset-table; }
    caption, th, td {
        @include reset-table-cell; }
    q, blockquote {
        @include reset-quotation; }
    a img {
    @include reset-image-anchor-border; } 
}

这里我们注意到Compass使用了之前提到过的Sass的 @mixin 混合器和 @include 包含特性来构建reset模块。在 global-reset 之外,reset模块还提供了一系列有特定用途的重置混合器,其中有一个是专为HTML5元素服务的。通过在你的Sass文件中添加 @include reset-html5 命令,输出文件中会生成额外的CSS规则来对HTML5的元素进行基本的样式修改。

article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    display: block;
}

2.7.4 不用计算创建布局

一份Blueprint网格布局网格布局代码

.container {
    width: 950px;
    margin: 0 auto;
}
/* 建立基本的格式浮动和外间距. */
.column, .span-1, .span-2, .span-3, .span-4, .span-5,
.span-6, .span-7, .span-8, .span-9, .span-10, .span-11,
.span-12, .span-13, .span-14, .span-15, .span-16,
.span-17, .span-18, .span-19, .span-20, .span-21,
.span-22, .span-23, .span-24 {
    float: left;
    margin-right: 10px;
}
/* 一行中的最后一列需要添加这个类修饰. */
.last { margin-right: 0; }
/* 通过使用下边这些类来设定列宽. */
.span-1 {width: 30px;}
.span-2 {width: 70px;}
.span-3 {width: 110px;}
.span-4 {width: 150px;}
.span-5 {width: 190px;}
.span-6 {width: 230px;}
.span-7 {width: 270px;}
.span-8 {width: 310px;}
.span-9 {width: 350px;}
.span-10 {width: 390px;}
.span-11 {width: 430px;}
.span-12 {width: 470px;}
.span-13 {width: 510px;}
.span-14 {width: 550px;}
.span-15 {width: 590px;}
.span-16 {width: 630px;}
.span-17 {width: 670px;}
.span-18 {width: 710px;}
.span-19 {width: 750px;}
.span-20 {width: 790px;}
.span-21 {width: 830px;}
.span-22 {width: 870px;}
.span-23 {width: 910px;}
.span-24 {width:950px; margin-right:0;}

那么Compass做了哪些事情来优化提升CSS网格布局呢? compass create my_grid --using blueprint

@include column($sidebar-columns);

还要注意 $sidebar-columns 变量

2.7.5 通过表格辅助器为表格添加更专业的斑马条纹样式

Compass表格辅助器

@import "compass/reset"
@import "compass/utilities/tables";
table {
    $table-color: #666;
    @include table-scaffolding;
    @include inner-table-borders(1px, darken($table-color, 40%));
    @include outer-table-borders(2px);
    @include alternating-rows-and-columns($table-color,
        adjust-hue($table-color, -120deg), #222222); }

inner-table-bordersouter-table-borders 混合器正如其名,用于给表格以及表格内的单元格添加边框。最后, alternating-rows-and-columns 混合器提供了一种更简单的方式,来给你的HTML表格添加斑马条纹样式。

2.7.6 CSS3 属性无需再写厂商前缀

sass

@import "compass/css3";
.rounded {
    @include border-radius(5px);
}

编译生成出来的css

.rounded {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    border-radius: 5px;
}
评论
发表评论
暂无评论
WRITTEN BY
蚝油牛肉盖浇饭
程序猿 想做全栈,但是前端后端都菜
TA的新浪微博
PUBLISHED IN
前端学习笔记

前端学习笔记

我的收藏