三沣开发知识 购物 网址 游戏 小说 股票 美女 租车 短信 新闻 笑话 | 开发 汉字 下载 软件 图书馆
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
vbs/VBScript DOS/BAT hta htc python perl 游戏相关 VBA 远程脚本 ColdFusion ruby专题
autoit seraphzone PowerShell linux shell Lua Golang Erlang 其它教程 CSS/HTML/Xhtml
html5 CSS XML/XSLT Dreamweaver教程 经验交流 开发者乐园 Android开发资料
站长资讯 .NET新手 ASP.NET C# WinForm Silverlight WCF CLR WPF XNA VisualStudio ASP.NET-MVC .NET控件开发 EntityFramework WinRT-Metro Java C++ PHP Delphi Python Ruby C语言 Erlang Go Swift Scala R语言 Verilog 其它语言 架构设计 面向对象 设计模式 领域驱动 Html-Css JavaScript jQuery HTML5 SharePoint GIS技术 SAP OracleERP DynamicsCRM K2 BPM 信息安全 企业信息 Android开发 iOS开发 WindowsPhone WindowsMobile 其他手机 敏捷开发 项目管理 软件工程 SQLServer Oracle MySQL NoSQL 其它数据库 Windows7 WindowsServer Linux
  IT知识库 -> Html-Css -> 菜鸟的 Sass 学习笔记 -> 正文阅读
 

[Html-Css]菜鸟的 Sass 学习笔记

菜鸟的 Sass 学习笔记 介绍
sass 是什么?? 在sass的官网,它是这么形容给自己的
Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.
sass 是世界上最成熟稳定强大的css扩展语言。
sass并不是一种编程语言,但是我们可以用于开发网页样式,你可以称它为css预处理器。用sass来写css,然后再编译成正常的css文件。
css兼容:Sass与所有版本的CSS完全兼容。
功能丰富:Sass拥有比任何其他CSS扩展语言更多的功能和能力。
成熟:Sass由其热爱的核心团队积极支持十多年。
社区:Sass由几家科技公司和数百名开发商的联盟积极支持和开发。
构架:有无数的框架与Sass建立。 Compass, Bourbon,  Susy 等等。
安装
先安装Ruby,再安装sass →gem install sass 
更详细的安装→http://sass-lang.com/install
  学习记录 1.变量
对于一个项目比如说像主要的颜色,或者说所有border的样式,这些比较重要的信息或者是在项目中重复使用的,在sass可以使用$来定义变量。
如果遇到突然项目整一个的border的颜色要改变,那么我们直接修改定义的变量border的颜色就可以了。
例:

//定义变量
$primary-border:1px solid #eee;
$primary-color:#488aff;

//使用变量
.test{
  border: $primary-border;
  color: $primary-color;
}

//编译结果
.test {
  border: 1px solid #eee;
  color: #488aff;
}

2.嵌套
sass允许css规则彼此嵌套,它具有明确的嵌套和可视化层次结构。但是请注意过度的嵌套会导致后期难以维护。
例如:

#main p {
  color: #00ff00;
  width: 97%;

  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}

编译后:

#main p {
  color: #00ff00;
  width: 97%;
}
#main p .redbox {
  background-color: #ff0000;
  color: #000000;
}

引用父选择器
使用&来替代父选择器,&必须在复合选择器的开头,甚至可以跟一个被添加到父选择器的后缀
例:

#main {
  color: black;
  a {
    font-weight: bold;
    &:hover { color: red; }
  }
  &-sidebar {
  border: 1px solid; 
  }
}

编译后:

#main {
  color: black;
}
#main a {
  font-weight: bold;
}
#main a:hover {
  color: red;
}
#main-sidebar {
  border: 1px solid;
}

嵌套属性
比如font-family,font-size和font-weight都在font命名空间,如果在同一个命名空间设置很多它的属性,挺麻烦的,sass提供这样的方式,只要写一次命名空间,然后嵌套他的每个子属性。

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

属性名称空间本身还可以有一个值
例如:

.funky {
  font: 20px/24px fantasy {
    weight: bold;
  }
}

编译后:

.funky {
  font: 20px/24px fantasy;
  font-weight: bold;
}

 3.注释
Sass支持标准的多行CSS注释/* */以及单行注释//。多行注释编译后仍然保留,而单行注释编译后就被删掉了。


/* 我是
 * 多行
 * 注释
 */
//我是我是我是单行注释
body {
  color: black; }

编译后:

/* 我是
 * 多行
 * 注释
 */
body {
  color: black;
}

如果是很重要的注释,即使是压缩模式编译后也存在/*加一个感叹号

/*!
 * 超级重要注释
 */

在注释中也可以使用变量

$version: "1.0.0";
/* 版本号 #{$version}. */

编译后

/* 版本号 1.0.0. */

4.Import
假设现在有两个sass文件,bass.scss和_part.scss,可以将_part.scss导入到bass.scss中。
然而导入的可是css文件,http:// 或者是url()
比如:

@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);

也可以一个import导入多个

@import "rounded-corners", "text-shadow";

这是一个示例:
_part.scss

ul,
ol {
  margin:  0;
  padding: 0;
}

base.scss

@import 'reset';

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

@import嵌套导入
例如现在有一个这个example.sass文件里面有以下内容

.example {
  color: red;
}

导入example

#main {
  @import "example";
}

编译结果

#main .example {
  color: red;
}

5.Mixin
我们使用@mixin定义一个代码块,然后用@include调用这个代码块。

@mixin border{
  border:1px solid #ee;
}

div{
  @include border
}

编译后:

div {
  border: 1px solid #ee;
}

还可以指定参数

@mixin border($color:#eee){
  border:1px solid $color;
}
div{
@include border(#eee);
}

6.颜色
颜色值支持所有算术运算

p {
  color: #010203 + #040506;
}

计算01 + 04 = 05,,02 + 05 = 07和03 + 06 = 09,并编译为:

p {
  color: #050709; }


p {
  color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
}

//编译为:
p {
  color: rgba(255, 255, 0, 0.75); }

它还提供了一些内置的颜色函数

hsl($ hue,$ saturation,$ lightness):从色调,饱和度和亮度值创建颜色。

hsla($ hue,$ saturation,$ lightness,$ alpha):从色调,饱和度,亮度和Alpha值创建颜色。

还有更多的关于内置的颜色函数可以看这里 →http://sass-lang.com/documentation/Sass/Script/Functions.html
7.继承@extend
sass允许一个选择器去继承另外一个选择器.

.test1 {border: 1px solid #eee;}
.test2 {@extend .test1;color:white;}

编译后

.test1, .test2 {
  border: 1px solid #eee;
}

.test2 {
  color: white;
}

8.@debug @warn @error
@debug和@warn,指令将SassScript表达式的值打印到标准错误输出流,它有助于调试。

@warn "这是一个警告";
@error "这是一个错误"
@debug "这是一个调试输出"

输出

WARM:这是一个警告
ERROR:这是一个错误
DEBUG:这是一个调试输出

9.控制指令和表达式
sass支持基本的控制指令和表达式控制,指令是高级功能,下来来介绍一下。
@if()

p {
  @if 1 + 1 == 2 { border: 1px solid;  }
  @if 5 < 3      { border: 2px dotted; }
}

编译后

p {
  border: 1px solid; }

@if声明可以跟着几个@else,@if语句和一个@else语句。如果@if语句失败,@else if则会按顺序尝试这些语句。

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

编译后

p {
  color: green; }

@for
该@for指令重复输出一组样式。对于每次重复,使用计数器变量来调整输出。

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

编译后

.item-1 {
  width: 2em;
}

.item-2 {
  width: 4em;
}

.item-3 {
  width: 6em;
}

@each

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

编译后

.puma-icon {
  background-image: url("/images/puma.png");
}

.sea-slug-icon {
  background-image: url("/images/sea-slug.png");
}

.egret-icon {
  background-image: url("/images/egret.png");
}

.salamander-icon {
  background-image: url("/images/salamander.png");
}

@while

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

编译后

.item-6 {
  width: 12em;
}

.item-4 {
  width: 8em;
}

.item-2 {
  width: 4em;
}

10.功能指令#function
可以在sass中定义自己的函数,并在任何值或脚本上下文中使用它们。注意避免函数命名一样导致冲突了。
例如:

//定义变量
$grid-width: 40px;
$gutter-width: 10px;

//自定义函数
@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

//使用
#sidebar { width: grid-width(5); }

//编译结果
#sidebar {
  width: 240px;
}

  编译
sass编译输出的默认CSS样式,可以执行-style命令行来选择四种不同的输出样式
:nested
nested样式是默认的Sass样式,因为它反映了CSS样式的结构和他们所设计的HTML文档。每个属性都有自己的行,但缩进不是常量。根据嵌套的深度,每个规则都是缩进的。嵌套样式在查看大型CSS文件时非常有用:它可以让您轻松掌握文件的结构,而无需实际读取任何内容。

#main {
  color: #fff;
  background-color: #000; }
  #main p {
    width: 10em; }

:expanded
expanded是一个更典型的人造CSS风格,每个属性和规则占一线。属性在规则中缩进,但是规则不以任何特殊方式缩进。

#main {
  color: #fff;
  background-color: #000;
}
#main p {
  width: 10em;
}

:compact
compact采用比嵌套或扩展更少的空间。它还将重点放在选择器上而不是他们的属性。每个CSS规则仅占用一行,每行都在该行上定义。嵌套规则彼此相邻,没有换行符,而单独的规则组在它们之间具有换行符。

#main { color: #fff; background-color: #000; }
#main p { width: 10em; }

:compressed
compressed样式占用尽可能少的空间,除了分隔选择器和文件末尾的换行符之外,没有空格。它还包括一些其他轻微的按压,例如选择最小的颜色表示。这并不意味着人的可读性。

#main{color:#fff;background-color:#000}#main p{width:10em}

ps:
sass 官网 →http://sass-lang.com/
sass github →https://github.com/sass
sass一个在线将sass编译为css的网站 →https://www.sassmeister.com/
此随笔乃本人学习记录,如有疑问欢迎在下面评论,转载请标明出处。
如果对您有帮助请动动鼠标右下方给我来个赞,您的支持是我最大的动力。
  Html-Css 最新文章
CSS z
25个Web前端开发工程师必看的国外大牛和酷站
清除浮动的几种方式
去除inline
CSS布局
HTML&CSS——使用DIV和CSS完成网站首页
Css 书写规范【转】
css常用属性总结之 id和class的区别,使用类
CSS实现背景透明,文字不透明(兼容各浏览器
CSS select样式优化 含jquery代码
上一篇文章      下一篇文章      查看所有文章
加:2017-08-12 23:26:21  更:2017-08-12 23:26:27 
 
技术频道: 站长资讯 .NET新手区 ASP.NET C# WinForm Silverlight WCF CLR WPF XNA Visual Studio ASP.NET MVC .NET控件开发 Entity Framework WinRT/Metro Java C++ PHP Delphi Python Ruby C语言 Erlang Go Swift Scala R语言 Verilog 其它语言 架构设计 面向对象 设计模式 领域驱动设计 Html/Css JavaScript jQuery HTML5 SharePoint GIS技术 SAP Oracle ERP Dynamics CRM K2 BPM 信息安全 企业信息化其他 Android开发 iOS开发 Windows Phone Windows Mobile 其他手机开发 敏捷开发 项目与团队管理 软件工程其他 SQL Server Oracle MySQL NoSQL 其它数据库 Windows 7 Windows Server Linux
脚本语言: vbs/VBScript DOS/BAT hta htc python perl 游戏相关 VBA 远程脚本 ColdFusion ruby专题 autoit seraphzone PowerShell linux shell Lua Golang Erlang 其它教程
网站开发: CSS/HTML/Xhtml html5 CSS XML/XSLT Dreamweaver教程 经验交流 开发者乐园 Android开发资料
360图书馆 软件开发资料 文字转语音 购物精选 软件下载 美食菜谱 新闻资讯 电影视频 小游戏 Chinese Culture 股票 租车
生肖星座 三丰软件 视频 开发 短信 Android开发 站长 古典小说 网文精选 搜图网 美图 中国文化英文版 多播 租车 短信
2017-8-19 4:16:56
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT知识库