【美高梅开户网址】sass的底子知识知多少,CodePen的CSS技术细节

CodePen的CSS技术细节

2015/01/28 · CSS ·
CodePen,
CSS

本文由 伯乐在线 –
maple
翻译,Mxt
校稿。未经许可,禁止转发!
英文出处:codepen.io。欢迎到场翻译组。

马克 奥托和lan Feather分别分享了GitHub和Lonely
Planet那多个网站中如何利用CSS,作者以为本身也理应参预到这一个妙不可言的位移之中,谈谈大家在CodePen中是怎么使用CSS的。

@import
      Sass 辅助具有css 的@规则,以及一些Sass
专属的条条框框,也被称呼“指令(directive)”.这几个规则在Sass 中存有区别的
【美高梅开户网址】sass的底子知识知多少,CodePen的CSS技术细节。      功能,详细解释如下。
      @import
        Sass 扩张了CSS 的@import 规则,让它能够引入 SCSS 和
Sass
        文件。 全数引入的 SCSS 和 Sass
文件都会被统一并出口多少个单纯
        的 CSS 文件。 别的,被导入的文书中所定义的变量或 mixins
都得以在主文件中选拔。
        @import 根据文件名引入。 暗中同意情况下,它会寻找 Sass
文件并
        直接引入, 不过,在少数三种意况下,它会被编写翻译成 CSS 的
@import 规则:
        要是文件的扩展名师 .css
        借使文件名以 http:// 开头
        假诺文件名师url().
        假如@import 包蕴了其他媒体询问(media queries)
        尽管上述情形都尚未出现,并且扩展名是 .scss 或 .sass,
该名称的 Sass 或 SCSS 文件就会被引入。 假使没有扩张名, Sass 将试
        着找出装有 .scss 或 .sass 扩充名的同名文件并将其引入。
例如:
        @import “foo.scss”;
        或
        @import “foo”;
        两者都将引入foo.scss文件,而
        @import “foo.css”
        @import “foo” screen
        @import “”;
        @import url(foo);
        将被编写翻译为:
        @import “foo.css”;
        @import “foo” screen;
        @import “”;
        @import url(foo);
      也得以通过贰个 @import 引入多个公文。例如:
      将引入 rounded-corners 和text-shadow 四个公文。

前言,在实习的时候,一向利用的是sass那么些预处理语言,第③回接触,感觉用起来尤其好,当时正是会有的简易用法,很多尖端用法还一直不提到到,不怎么会选择,后来在教授的教学,自身上网查资料和应用中尤其熟练,后来在专业工作中发现集团用的是Less,正因为有在此以前sass的底蕴,接受起来特别快,能非常快利用,明日就把sass基础知识汇总一下,感兴趣的同伴们看恢复生机~get起来!

1. Sass简介

Sass 是一种css预处理器,CSS
预处理器定义了一种新的语言,其基本考虑是,用一种越发的编制程序语言,为 CSS
扩张了部分编制程序的表征,将 CSS
作为目的转移文书,然后开发者就借使选取那种语言进行编码工作。

除外sass还有一部分任何大规模的预处理语言

  • LESS
  • Stylus

Sass 有时候也被誉为 SCSS,两者之间分化之处有以下两点:

  • 文件扩张名不一样,Sass 是以“.sass”后缀为扩张名,而 SCSS
    是以“.scss”后缀为扩充名
  • 语法书写方式不一致,Sass
    是以严厉的缩进式语法规则来书写,不带大括号({})和分集团(;),而 SCSS
    的语法书写和我们的 CSS 语法书写格局特别接近。

来看一个示范:

/* Sass 语法 */
$font-stack: Helvetica, sans-serif
$primary-color: #333
body
  font: 100% $font-stack
  color: $primary-color

/* Scss 语法 */
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
  font: 100% $font-stack;
  color: $primary-color;
}

编写翻译出来的 CSS

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

scss文件中能够完全像写不奇怪的css那样去写.

概览

  • 预处理器使用了SCSS
  • 我们使用Autoprefixer
  • 大家利用Rails Asset
    Pipeline
  • 事实上加载的那多少个可表明为CSSSCSS文本其实正是3个包蕴各模块的目录
  • 我们有二个合并样式,首要缘由是这么看起来一致性更好
  • 大家不使用其余特其余“CSS架构”,只使用类
  • 每三个网页中不超过2-3个CSS文件
  • 传播媒介询问大家利用可以关掉的@mixin
  • 作者们鼓励注释
  • 部分总括数据
  • 在本文中“大家”那些词大多数只表示我三个
  • 前景展望和希望

      编写翻译为1个 CSS 文件, 这时,你就足以在文书名前边加3个下划
      线,就能防止被编写翻译。 那将报告 Sass 不要把它编写翻译成 CSS
文件。
      然后,你就能够像在此以前一致引入这些文件了,而且还是能大致掉文
      假设你有1个 SCSS 或 Sass 文件须求引入,
可是您又不期待它被件名后边的下划线。

1. Sass简介


Sass 是一种css预处理器,CSS
预处理器定义了一种新的言语,其基本思维是,用一种尤其的编程语言,为 CSS
扩展了有个别编制程序的风味,将 CSS
作为靶子转移文书,然后开发者就倘使使用那种语言进行编码工作。

除外sass还有一部分其余大规模的预处理语言

  • Less
  • Stylus

Sass 有时候也被誉为 SCSS,两者之间分裂之处有以下两点

  • 文本扩充名分歧,Sass 是以“.sass”后缀为扩大名,而 SCSS
    是以“.scss”后缀为扩展名
  • 语法书写情势各异,Sass
    是以严酷的缩进式语法规则来书写,不带大括号({})和支行(;),而 SCSS
    的语法书写和我们的 CSS 语法书写方式格外接近。

来看一个演示:

/* Sass 语法 */
$font-stack: Helvetica, sans-serif
$primary-color: #333
body
  font: 100% $font-stack
  color: $primary-color

/* Scss 语法 */
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
  font: 100% $font-stack;
  color: $primary-color;
}

编译出来的 CSS

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}
scss文件中可以完全像写正常的css那样去写.

2. sass安装

npm install -g node-sass
node-sass -w xxx.scss xxx.css --output-style expanded

node-sass 参数:

-w, --watch                Watch a directory or file
-r, --recursive            Recursively watch directories or files
-o, --output               Output directory
-x, --omit-source-map-url  Omit source map URL comment from output
-i, --indented-syntax      Treat data from stdin as sass code (versus scss)
-q, --quiet                Suppress log output except on error
-v, --version              Prints version info
--output-style             CSS output style (nested | expanded | compact | compressed)
--indent-type              Indent type for output CSS (space | tab)
--indent-width             Indent width; number of spaces or tabs (maximum value: 10)
--linefeed                 Linefeed style (cr | crlf | lf | lfcr)
--source-comments          Include debug info in output
--source-map               Emit source map
--source-map-contents      Embed include contents in map
--source-map-embed         Embed sourceMappingUrl as data URI
--source-map-root          Base path, will be emitted in source-map as is
--include-path             Path to look for imported files
--follow                   Follow symlinked directories
--precision                The amount of precision allowed in decimal numbers
--importer                 Path to .js file containing custom importer
--functions                Path to .js file containing custom functions
--help                     Print usage info

预处理器

人们对于预处理器褒贬不一,可是自个儿觉着只要做一个相比较大的网站项目,没有预处理器是丰裕拮据的。若您认为本身那是在过度依赖工具,会让自个儿效能变低,那么请允许我讥笑你。
小编更爱好SCSS是因为自身爱好它的社区,同时本人也认为它更好。但实话说,全部那几个主流的预处理器(SassLESSStylus)都基本得以满意本身的必要。那里是一些自个儿认为可行的特点(根据实用性递减排序):

  1. @import
  2. @mixin
  3. Nesting(嵌套)
  4. Variables(变量)
  5. @extend
  6. Math(数学生运动算)
  7. Loops(循环)
  8. 长日子用它们工作,援助小编明白那么些炫酷的小例子

永不预处理器我一筹莫展想像要花多大的肥力才能取代那些特色。

      例如,你有三个文本叫做 _colors.scss。 那样就不会生成
_colors.css 文件了, 而且你还是能这么做:
      @import “colors”;//不用加下划线
      来引入 _colors.scss 文件。
      注意,在同3个索引不可能同时设有关节炎划线和不风疹划线的同名文件。
例如, _colors.scss 不能与 colors.scss 并存。

2. sass安装


npm install -g node-sass
node-sass -w xxx.scss xxx.css --output-style expanded
node-sass 参数:

-w, --watch                Watch a directory or file
-r, --recursive            Recursively watch directories or files
-o, --output               Output directory
-x, --omit-source-map-url  Omit source map URL comment from output
-i, --indented-syntax      Treat data from stdin as sass code (versus scss)
-q, --quiet                Suppress log output except on error
-v, --version              Prints version info
--output-style             CSS output style (nested | expanded | compact | compressed)
--indent-type              Indent type for output CSS (space | tab)
--indent-width             Indent width; number of spaces or tabs (maximum value: 10)
--linefeed                 Linefeed style (cr | crlf | lf | lfcr)
--source-comments          Include debug info in output
--source-map               Emit source map
--source-map-contents      Embed include contents in map
--source-map-embed         Embed sourceMappingUrl as data URI
--source-map-root          Base path, will be emitted in source-map as is
--include-path             Path to look for imported files
--follow                   Follow symlinked directories
--precision                The amount of precision allowed in decimal numbers
--importer                 Path to .js file containing custom importer
--functions                Path to .js file containing custom functions
--help                     Print usage info

3. Sass的为主特点

在CSS属性中加与浏览器相关的前缀

美高梅开户网址,因为有Autoprefixer以此工具,小编在工作中大概不须要记CSS中属性可能值。我专门欣赏它对 flexbox (伸缩布局盒)
回退的处理格局。
作者原先用Compass正如多,但自个儿发觉95%的情景下都是用它处理CSS3@mixin。小编更欣赏“所见即所得”那种方法,而不是只为标前缀而内地放@include。不用Compass
之后小编相比记挂的二个成效是生成SVG渐变,但对此仅在IE9才供给的职能来说它也呈现过分重型了,所以总体上小编也没怎么大损失。

      嵌套 @import

3. Sass的为主特点


变量

$brand-primary : darken(#428bca, 6.5%) !default;
$btn-primary-color : #fff !default;
$btn-primary-bg : $brand-primary !default;
$btn-primary-border : darken($btn-primary-bg, 5%) !default;
.btn-primary {
   background-color: $btn-primary-bg;
   color: $btn-primary-color;
   border: 1px solid $btn-primary-border;
}

$baseLineHeight: 2;
$baseLineHeight: 1.5 !default;
body{
    line-height: $baseLineHeight;
}

/* 局部变量 */
$color: orange !default;
.block {
  color: $color;
}
em {
  $color: red;
  a {
    color: $color;
  }
}
span {
  color: $color;
}

Rails

我是Rails Asset Pipeline的客官,它实在太好用了。 举个例证:
笔者把句话放在视图中:

JavaScript

<%= stylesheet_link_tag "about/about" %>

1
&lt;%= stylesheet_link_tag &quot;about/about&quot; %&gt;

然后它会发出3个自家必要的CSS文件:

CSS

<link
href=””
media=”screen” rel=”stylesheet” type=”text/css” />

1
<link href="http://assets.codepen.io/assets/about/about-a05e4bd3a5ca76c3fb17f2353fedbd99.css" media="screen" rel="stylesheet" type="text/css" />

大家在财富里把终止时间写得离以后远一些。

美高梅开户网址 1

我们每一回配置的时候,它都会透过重新生成随机数来重新缓存,所以那是3个优秀棒的缓存机制。
大家在CodePen中只是对JavaScript使用Sprockets。有了它我们能够这么干:

JavaScript

//= require common/whatever.js //= require_tree ./../hearting/

1
2
//= require common/whatever.js
//= require_tree ./../hearting/

你也能够在CSS如此做,但何必自己瞎着急呢,因为: 1.
Sass可见落到实处这些效率 2.
比方你用Sass达成这么些效果,那注重性表现更好。像$variables@mixin都能够在文件之间利用了。
咱们并不会把CSS文件上传出Git仓库中,这样对Git很好,全体的能源都在布署的时候实行诠释编写翻译。

        固然多数年华只需求在顶层文件使用 @import
就行了,不过,你还是能把他们带有在css 规则和@media 规则中。
        然后如此引用:
          #main {
            @import “example”;
        }
        编译出来的 CSS:
          #main .example {
              color: red;
        }
@media
    Sass 中的 @media 指令和 CSS 的施用规则平等的简易,但它有另
    外三个意义,能够嵌套在 CSS 规则中。有点类似 JS 的冒泡功用一
    个简易示例:
    .siderbar{
        width:300px;
        @media screen and (orientation: landscape){
        width:500px;
        }
    }
    编写翻译出来;
      .sidebar{
          width:300px;
      }
    @media screen and ( orientation : landscape){
    .sidebar{
      width:500px;
      }
    }
    @media 也足以嵌套@media:
    @media screen{
        .sidebar{
          @media (orientation: landscape){
            width:500px;
            }
        }
    }
    在应用@media 时还足以应用#{}:
    $media :screen;
    $feature:-webkit-min-device-pixel-ratio;
    $value:1.5;
    @media #{$media} and ($featrue:$value){
    .sidebar{
        width:500px;
        }
      }
    编写翻译出来的css:
      @media screen and (-webkit-min-device-pixel-ratio;1.5){
        .sidebar{
            width:500px;
          }
      }
@extend
    Sass 中的@extend 是用来扩竞采用器只怕占位符,比如
    .error{
      border:1px #f00;
      background-color:#fdd;
      }
    .error.intrusion{
      background-image:url(“/image/hacked.png”);
    }
    .seriousError{
        @extend .error;
        border-width:3px;
    }
    被编写翻译为:
      .error, .seriousError{
        border:1px #f00;
        background-color:#fdd;
      }
    .error .intrusion, .seriousError .intrusion{
        background-image: url(“/image/hacked.png”);
    }
    .seriousError{
        border-width:3px;
    }
    扩张选拔器:
      @extend 不止扩充类选拔器,还足以扩展任何选取器,比如
.special.cool, a:hover, 或 a.user[href^=”] 例如
      .hoverlink{
          @extend a:hover;
      }
      a:hover{
          text-decoration:underline;
      }
    编译出来:
      a:hover, .hoverlink{
        text-decoration:underline;
      }

变量:

sass的变量必须是$早先,后边紧跟变量名,而变量值和变量名之间就必要运用冒号(:)分隔离(就如CSS属性设置同样),借使值前边加上!default则意味着暗许值。方便统一修改和护卫。

$brand-primary : darken(#428bca, 6.5%) !default; //定义变量
$btn-primary-color : #fff !default;//定义变量
$btn-primary-bg : $brand-primary !default;//定义变量
$btn-primary-border : darken($btn-primary-bg, 5%) !default;//定义变量
.btn-primary {
   background-color: $btn-primary-bg;
   color: $btn-primary-color;
   border: 1px solid $btn-primary-border;
}

/* 局部变量 */
$color: orange !default;
.block {
  color: $color;
}
em {
  $color: red;
  a {
    color: $color;
  }
}

嵌套

nav {
  a {
    color: red;
    header & {
      color:green;
    }
  }  
}

.box {
  border: {
   top: 1px solid red;
   bottom: 1px solid green;
  }
}

.clearfix{
  &:before,
  &:after {
    content:"";
    display: table;
  }
  &:after {
    clear:both;
    overflow: hidden;
  }
}

不要无节制嵌套,一切都基于实际情形判断

文件社团结构

被加载的CSS文本会有一份对应的SCSS,这几个SCSS文件中并未其他实际的CSS代码,而是用来讲述CSS文件中的内容。举个例子,那是大家以后的global.scss

JavaScript

// General Dependencies @import "global/colors"; @import
"global/bits"; // Base @import "global/reset";
@import "global/layout"; // Areas @import
"global/header"; @import "global/footer"; //
Patterns @import "global/typography"; @import
"global/forms"; @import "global/toolbox"; @import
"global/buttons"; @import "global/modals"; @import
"global/messages"; @import "global/badges"; //
第贰方组件 // (近来从不)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// General Dependencies
@import &quot;global/colors&quot;;
@import &quot;global/bits&quot;;
 
// Base
@import &quot;global/reset&quot;;
@import &quot;global/layout&quot;;
 
// Areas
@import &quot;global/header&quot;;
@import &quot;global/footer&quot;;
 
// Patterns
@import &quot;global/typography&quot;;
@import &quot;global/forms&quot;;
@import &quot;global/toolbox&quot;;
@import &quot;global/buttons&quot;;
@import &quot;global/modals&quot;;
@import &quot;global/messages&quot;;
@import &quot;global/badges&quot;;
 
// 第三方组件
// (目前没有)

自个儿试着百折不挠那样做,但每当笔者向三个本应被整个导入的文件中添加代码时,老是会抛出一堆极度。作者应当弄个关照文件然后写上:

CSS

@import “shame”; // 注意有点眉目啊,里面这多少个魂淡。

1
@import "shame"; // 注意有点条理啊,里面这几个魂淡。

      .hoverlink{
        @extend a:hover;
      }
      .comment a.user:hover{
          font-weight:bold;
      }
    编写翻译出来的CSS
      .comment a.user:hover, .comment
        .user .hoverlink{
          font-weight:bold;
    }
      多少个扩张
      所设有个别样式要继承七个地点的样式,那么能够动用@extend
来继承的五个采用器恐怕占位符的体制,如:
      .error{
        border:1px #f00;
        background-color:#fdd;
      }
      .attention{
        font-size:3em;
        background-color:#ff0;
      }
    .seriousError{
        @extend .error;
        @extend .attention;
        border-width:3px;
    }
    编写翻译出来的css
      .error, seriousError{
          border-width:3px;
      }
    扩张单一选取器
      后边大家清楚 %placeholder 不使用@extend展现调用是不会变动
      任何样式代码。那么在甄选器中使用占位符一样。比如下边包车型大巴代码
      #context a%extreme{
          color:blue;
          font-weight:bold;
          font-size:2em;
      }
    那段代码在不调用在此之前不发出任何代码,唯有能过@extend调用之后才转移代码:
    .notice{
      @extend %extreme;
    }
    编写翻译出来的CSS
      #context a.nontice{
        color:blue;
        font-weight:bold;
        font-size:2em;
      }
@at-root
    @at-root 从字面上解释就是跳出跟成分。当你选取器嵌套多层之
    后,想让某些采纳器跳出,此时就能够使用 @at-root。来看2个
    简单的言传身教:
    .a{
      color:red;
      .b{
        color:orange;
      .c{
        color:yellow;
    @at-root .d{
      color:green;
          }
        }
      }
    }
  编写翻译出来的css
    .a{
      color:red;
    }
  .a .b{
    color:orange;
    }
  .a .b .c{
    color:yellow;
  }
  .d{
    color;green;
  }
@debug
    @debug 在 Sass 中是用来调节的,当您的在 Sass 的源码中选取了
    @debug 指令之后,Sass
代码在编写翻译出错时,在指令终端会输出你设置的唤起 Bug:
    @debug 10em +12em;
    会输出:
      Line 1 EEBUG: 22em
@warn
    @warn 和 @debug 功用看似,用来赞助我们更好的调剂 Sass。如:
    @mixin adjust-location($x,$y){
    @if unitless($x){
      @warn “Assuming #{$x} to be in pixels”;
      $x: 1px *$x;
    }
    @if unitless($y){
      @warn “Assuming #{$y} to be in pixels”
        $y: 1px *$y:
      }
      position:relative; left:$x; top:$y;
    }
@error
    @error 和@warn,@debug 作用是如出一辙。
    @mixin error($x){
        @if $x < 10{
        width:$x * 10px;
    }@else if $x == 10{
      width:$x;
    }@else{
      @error “你须要将#{$x}值设置在10以内的数”;
      }
    }
  .texst{
      @include error(15);
  }
  编写翻译的时候:
  你须要将15 值设置在10 以内的数 on line 7 at column5

嵌套

sass指的是在3个选用器中嵌套另三个增选器来完结连续,从而增强了sass文件的结构性和可读性。
在选用器嵌套中,能够利用&表示父成分选用器。

nav {
  a {
    color: red;
    header & {
      color:green;
    }
  }  
}
.clearfix{
  &:before,
  &:after {
    content:"";
    display: table;
  }
}

**瞩目:不要无节制嵌套,一切都依照实际情形判断,假使嵌套太多层,不便于代码的保卫安全,借使没须要嵌套的必然要单独分离出来。
**

混合宏

@mixin border-radius{
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
button{
  @include border-radius;
}

@mixin border-radius($radius:5px){
  -webkit-border-radius: $radius;
  border-radius: $radius;
}
.nav{
  @include border-radius;
}
.box{
  @include border-radius(3px);
}

@mixin center($width,$height){
  width: $width;
  height: $height;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -($height) / 2;
  margin-left: -($width) / 2;
}
.box-center {
  @include center(500px,300px);
}

@mixin box-shadow($shadows...){
  @if length($shadows) >= 1 {
    -webkit-box-shadow: $shadows;
    box-shadow: $shadows;
  } @else {
    $shadows: 0 0 2px rgba(#000,.25);
    -webkit-box-shadow: $shadow;
    box-shadow: $shadow;
  }
}
.box {
  @include box-shadow(0 0 1px rgba(#000,.5),0 0 2px rgba(#000,.2));
}

混合宏会生成冗余代码

代码的集体结构

混合宏(@mixin)

sass中选拔@mixin评释混合,能够传递参数,参数名以$符号开头,八个参数以逗号分开,也得以给参数设置暗许值。表明的@mixin通过@include来调用。

@mixin border-radius($radius:5px){
  -webkit-border-radius: $radius;//兼容处理
  border-radius: $radius;
}
.nav{
  @include border-radius;
}
.box{
  @include border-radius(3px);
}

@mixin center($width,$height){//居中处理
  width: $width;
  height: $height;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -($height) / 2;
  margin-left: -($width) / 2;
}
.box-center {
  @include center(500px,300px);
}

缺陷:混合宏会生成冗余代码

扩展/继承

.btn {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

.btn-primary {
  background-color: #f36;
  color: #fff;
  @extend .btn;
}

.btn-second {
  background-color: orange;
  color: #fff;
  @extend .btn;
}

不会生成冗余代码

本人写代码时必定会依据的专业:【译者注:笔者在原作中说是一种性变态,表示这么些专业是他迟早会鲁人持竿的】

  • 品质和嵌套有1个空格的缩进
  • 在选择器(selectors)之后或”{“前边加二个空格
  • 一行壹脾品质注脚
  • 在”:”(冒号)前边加一个空格
  • 底部的”}”符号另起一行,并与采纳器同等缩进
  • 0 作为长度的时候不加单位
  • 名称中央银行使连字符”-”而不用下划线”_”

扩展/继承( @extend)

sass中,选用器继承能够让选取器继承另叁个采用器的有着样式,并协同申明。使用选用器的接轨,要动用首要词@extend,前面紧跟供给后续的选取器。

.btn {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

.btn-primary {
  background-color: #f36;
  color: #fff;
  @extend .btn;
}

可取:不会生成冗余代码

占位符

%mt5 {
  margin-top: 5px;
}
%pt5{
  padding-top: 5px;
}
.btn {
  @extend %mt5;
  @extend %pt5;
}

mt5 和 pt5 并不会转移最后代码

作者写代码时大都会按部就班的科班:

多个挂钩密切的类个中不加空行:

CSS

.thing { } .related-thing { }

1
2
3
4
5
6
.thing {
 
}
.related-thing {
 
}

有一些沟通的两个类之间加贰个空行:

CSS

.thing { } .another-thing { }

1
2
3
4
5
6
7
.thing {
 
}
 
.another-thing {
 
}

没什么关联的始末留两空行:

CSS

.thing { } .totally-different-thing { }

1
2
3
4
5
6
7
.thing {
 
}
 
.totally-different-thing {
 
}

占位符(%)

优势:如若不调用则不会有任何多余的css文件,制止了之前在有的基础的文件中预约义了成都百货上千基础的体裁,然后实际运用中不管是还是不是采取了@extend去继承相应的体制,都会分析出来有所的体裁。占位采用器以%标识定义,通过@extend调用。

%mt5 {
  margin-top: 5px;
}
%pt5{
  padding-top: 5px;
}
.btn {
  @extend %mt5;
  @extend %pt5;
}

mt5 和 pt5 并不会转移最后代码

插值#{}

允许在#{}内部分析变量

$properties: (margin, padding);
@mixin set-value($side, $value) {
  @each $prop in $properties {
    #{$prop}-#{$side}: $value;
  }
}
.login-box {
  @include set-value(top, 14px);
}

自作者不太关爱的行业内部:

  • 质量的逐条。相关的质量(如
    height/width)一般会放一起,但不会特意在意这一个。
  • 注明格局。二种都能够用

在事实上的干活中,笔者甚至也不会严刻依照祥和的正规写。

插值#{}

万分规变量——
一般大家定义的变量都为属性值,可直接使用,可是借使变量作为质量或在一些特殊意况下等则必须求以#{$variables}方式利用。

$properties: (margin, padding);
@mixin set-value($side, $value) {
  @each $prop in $properties {
    #{$prop}-#{$side}: $value;
  }
}
.login-box {
  @include set-value(top, 14px);
}

注释

  1. 接近 CSS 的注脚格局,使用 ”/* ”开端,结属使用 ”*/ ”
  2. 恍如 JavaScript 的注脚形式,使用“//”

多头分别,前者会在编写翻译出来的 CSS 展现,后者在编写翻译出来的 CSS 中不会议及展览示

模式

本身写的代码大概会给拥有的因素一个类,作者不清楚那是或不是根据了SMACSSOOCSSBEM等等,不是很在意这几个。
那并不意味着作者尚未写嵌套(比如创立组合选拔器),大概说作者对嵌套的层数需要苛刻,只是自小编一般不会写太深的嵌套。
作者一般会那样写:

CSS

.box { h2 { &:after { } } }

1
2
3
4
5
6
.box {
  h2 {
    &:after {
    }
  }
}

可是笔者会想:要不要给h2一个类呢?应不该给那种头类型创制三个足以引用的样式呢?然后作者会甘休这样想了,因为小编发觉到假使这一个样式现身得丰富频仍,那么作者能在后来很简单更改掉,换到可接纳的情势。

完整的规范正是下降特异性。无论你代码重用做得多好,依然平常会有亟待重写的动静,所以特异性越少,重用就会变得更便于。不仅如此,以那种格局重写,你居然可以在不用id选择器或然!important的时候实行重写。

貌似的话,Rem是本人选拔字体大小时候的单位,px是其余因素的轻重缓急单位。

注释

1.类似 CSS 的注释情势,使用 ”/* ”开头,结属使用 ”*/ ”
2.近似 JavaScript 的诠释方式,使用“//”
两者分别,前者会在编译出来的 CSS 展现,后者在编写翻译出来的 CSS 中不会显得

数据类型

Sass 和 JavaScript 语言类似,也装有自个儿的数据类型,在 Sass
中富含以下二种数据类型:

  1. 数字: 如,1、 2、 13、 10px;
  2. 字符串:有引号字符串或无引号字符串,如,”foo” ‘bar’ baz;
  3. 颜色:如,blue, #04a3f9, rgba(255,0,0,0.5);
  4. 布尔型:如,true, false
  5. 空值:如,null
  6. 值列表:用空格只怕逗号分开,如,1.5em 1em 0 2em ,
    Helvetica, Arial, sans-serif

恳请文件

本身拼命在各种页面上呼吁3个或1个CSS文件:

  • global.css
  • page.css(如若不是编辑器的页面)
  • section.css(假诺急需)

思维是尽量让请求数少一些,可是又不是最好地把装有东西塞到二个文本里。作者感到在CodePen上,有太多页面特定的体制,若是把这个都放置3个文件里,那么global.css本条文件就会变得老大大。笔者有史以来没有如此尝试过,大概有一天尝试一下也会很有趣。笔者会为它新建个分支叫:squiCSSh_it_real_good(高压版CSS)

数据类型

Sass 和 JavaScript 语言类似,也不无温馨的数据类型,在 Sass
中涵盖以下三种数据类型:

  • 数字: 如,1、 2、 13、 10px;
  • 字符串:有引号字符串或无引号字符串,如,”foo” ‘bar’ baz;
  • 颜色:如,blue, #04a3f9,rgba(255,0,0,0.5);
  • 布尔型:如,true, false
  • 空值:如,null
  • 值列表:用空格恐怕逗号分开,如,1.5em 1em 0 2em ,
    Helvetica, Arial, sans-serif

运算

.box {
  width: 20px + 8in;
}
$full-width: 960px;
$sidebar-width: 200px;
.content {
  width: $full-width -  $sidebar-width;
}
.box {
  width: 10px * 2;
}
.box {
  width: (100px / 2);  
}
p {
  font: 10px/8px;             // 纯 CSS,不是除法运算
  $width: 1000px;
  width: $width/2;            // 使用了变量,是除法运算
  width: round(1.5)/2;        // 使用了函数,是除法运算
  height: (500px/2);          // 使用了圆括号,是除法运算
  margin-left: 5px + 8px/2px; // 使用了加(+)号,是除法运算
}
.box {
  width: ((220px + 720px) - 11 * 20 ) / 12 ;  
}
p {
  color: #010203 + #040506;
  background-color: #010203 * 2;
}

$content: "Hello" + "" + "Sass!";
.box:before {
  content: " #{$content} ";
}

传播媒介询问(Media Queries

我使用@mixin做媒体询问。有时笔者会想“那个上涨幅度或更大”,有时会想“那些宽度或更小”(正是媒体询问的逻辑呀!)。那样写出来有点啰嗦:

JavaScript

@mixin breakpoint($point) { @if ($MQs == true) { @if $point == baby-bear
{ @media (max-width: 500px) { @content; } } @if $point == mama-bear {
@media (max-width: 700px) { @content; } } @if $point == papa-bear {
@media (max-width: 800px) { @content; } } @if $point == super-bear {
@media (max-width: 1280px) { @content; } } @if $point ==
reverso-baby-bear { @media (min-width: 501px) { @content; } } @if $point
== reverso-mama-bear { @media (min-width: 701px) { @content; } } @if
$point == reverso-papa-bear { @media (min-width: 801px) { @content; } }
@if $point == reverso-super-bear { @media (min-width: 1281px) {
@content; } } @if $point == exclusive-baby-bear { @media (max-width:
500px) { @content; } } @if $point == exclusive-mama-bear { @media
(min-width: 501px) and (max-width: 800px) { @content; } } @if $point ==
exclusive-papa-bear { @media (min-width: 801px) and (max-width: 1280px)
{ @content; } } @if $point == iOS { @media (min-device-width: 768px) and
(max-device-width: 1024px), (max-device-width: 480px) { @content; } } }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
@mixin breakpoint($point) {
  @if ($MQs == true) {
    @if $point == baby-bear {
      @media (max-width: 500px) { @content; }
    }
    @if $point == mama-bear {
      @media (max-width: 700px) { @content; }
    }
    @if $point == papa-bear {
      @media (max-width: 800px) { @content; }
    }
    @if $point == super-bear {
      @media (max-width: 1280px) { @content; }
    }
 
    @if $point == reverso-baby-bear {
      @media (min-width: 501px) { @content; }
    }
    @if $point == reverso-mama-bear {
      @media (min-width: 701px) { @content; }
    }
    @if $point == reverso-papa-bear {
      @media (min-width: 801px) { @content; }
    }
    @if $point == reverso-super-bear {
      @media (min-width: 1281px) { @content; }
    }
 
    @if $point == exclusive-baby-bear {
      @media (max-width: 500px) { @content; }
    }
    @if $point == exclusive-mama-bear {
      @media (min-width: 501px) and (max-width: 800px) { @content; }
    }
    @if $point == exclusive-papa-bear {
      @media (min-width: 801px) and (max-width: 1280px) { @content; }
    }
 
    @if $point == iOS {
      @media (min-device-width: 768px) and (max-device-width: 1024px), (max-device-width: 480px) {
        @content;
      }
    }
  }
}

本身只是欣赏它的命名规范,平日貌似都不会用上,只是想让自个儿在急需的的时候知道怎么办。

专注在上头代码第②行处@if ($MQs == true) {,作者在拥有包罗内容列表的SCSS文本中安装了开关变量。那是因为在部分页面是自适应的,有的不是,但它们常常会用到同三个零部件。若是这些页面设计初衷不是自适应的(一些只是为着在电脑桌面环境中利用的页面,比如说我们设计的3个拖放工具,还无法在触摸设备上采纳),大概那些页面在移动装备选用条件下会重定向到专门的版本上。在这几个页面包车型地铁CSS文件中不需求含有媒体询问(Media
Queries
),它们也用不上。

运算

sass具有运算的特征,可以对数值型的Value(如:数字、颜色、变量等)实行加减乘除四则运算。请小心运算符前后请留一个空格,不然会出错。

$full-width: 960px;
$sidebar-width: 200px;
.content {
  width: $full-width -  $sidebar-width;
}
p {
  font: 10px/8px;             // 纯 CSS,不是除法运算
  $width: 1000px;
  width: $width/2;            // 使用了变量,是除法运算
  width: round(1.5)/2;        // 使用了函数,是除法运算
  height: (500px/2);          // 使用了圆括号,是除法运算
  margin-left: 5px + 8px/2px; // 使用了加(+)号,是除法运算
}
.box {
  width: ((220px + 720px) - 11 * 20 ) / 12 ;  
}
p {
  color: #010203 + #040506;
  background-color: #010203 * 2;
}

4. Sass高级天性

注释

自己的注释风格拾贰分无限制。在超过一半动静下本人从不会修改它,假诺在事后笔者读那几个注释发现笔者不懂它怎么样看头了,或然它和代码描述得驴头不对马嘴了,小编就会删掉它。

CSS

.drag-from-pen-grid { padding-bottom: 52px; /* adding this to make room
for pagination. A little magic-numbery… */ }

1
2
3
.drag-from-pen-grid {
  padding-bottom: 52px; /* adding this to make room for pagination. A little magic-numbery… */
}

4. Sass尖端个性


@if

@mixin blockOrHidden($boolean:true) {
  @if $boolean {
    display: block;
  }
  @else {
    display: none;
  }
}
.block {
  @include blockOrHidden;
}
.hidden{
  @include blockOrHidden(false);
}

总结数据

  • CodePen一起大约有157个独立的SCSS文件,find /stylesheets ! -name "*.scss" | wc -l只是从未会现出自个儿找不到自作者要找的文本那种气象。原因如下:
  1. Sublime编辑器中寻觅二个种类里的文书很简单
  2. 它们有美妙的组织和命名,小编只须要用command –t
    便能够一向跳到自家要找的公文
  • SCSS文本里一共有13,345行代码。find stylesheets/ -name '*.scss' | xargs wc –l
  • global.css大小:11.8k
  • page.css(除了编辑器,大概拥有页面都有使用)大小:5.5k
  • editor.css大小:6.2k

CSS文本并不是我们决定质量的关键因素。大家的字体大小是它的4倍,JavaScript文件大小是它的10倍。

@if

@if可二个规格单独使用,也能够和@else结合多规格使用

@mixin blockOrHidden($boolean:true) {
  @if $boolean {
    display: block;
  }
  @else {
    display: none;
  }
}
.block {
  @include blockOrHidden;
}
.hidden{
  @include blockOrHidden(false);
}

@for

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

$grid-prefix: span !default;
$grid-width: 60px !default;
$grid-gutter: 20px !default;

%grid {
  float: left;
  margin-left: $grid-gutter / 2;
  margin-right: $grid-gutter / 2;
}
@for $i from 1 through 12 {
  .#{$grid-prefix}#{$i}{
    width: $grid-width * $i + $grid-gutter * ($i - 1);
    @extend %grid;
  }  
}

关于我

我们多少人对抢先54%的网站建设办事都3头插手,可是有个别部分的办事是我们八个分级负责的,小编就是独自承担CSS这一块。
作者不得不提的是,就算本人自以为本人的劳作情势是贰个很棒的形式,可是也有恐怕它只适合作者用,在旁人看来好像有点意外。
小编有二个索要勘误的地点是把要做的工作(TODO’s)写在题材追踪里而不是写在代码里。作者并不曾工具能够唤起自个儿在代码中写下的要做的工作(TODO’s),所以那些业务平日被本身忘了。
小编期望以后大家可以有更加多的队友,然后小编会寻找三个力所能及让大家都适应的劳作形式。

@for

for循环有三种情势,分别为:@for $var from <start> through
<end>和@for $var from <start> to
<end>。$i代表变量,start表示初叶值,end表示停止值,那三个的分歧是必不可缺字through表示包蕴end这些数,而to则不包含end那个数。

@for $i from <start> through <end>
@for $i from <start> to <end>
@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}
@for $i from 1 to 3 {
  .item-#{$i} { width: 2em * $i; }
}
$grid-prefix: span !default;
$grid-width: 60px !default;
$grid-gutter: 20px !default;

%grid {
  float: left;
  margin-left: $grid-gutter / 2;
  margin-right: $grid-gutter / 2;
}
@for $i from 1 through 12 {
  .#{$grid-prefix}#{$i}{
    width: $grid-width * $i + $grid-gutter * ($i - 1);
    @extend %grid;
  }  
}

@each

$list: adam john wynn mason kuroir; //$list 就是一个列表
@mixin author-images {
    @each $author in $list {
        .photo-#{$author} {
            background: url("vatars/#{$author}.png") no-repeat;
        }
    }
}
.author-bio {
    @include author-images;
}

前景展望

  • 自己并从未运用机动物检疫查代码错误的工具,可是在未来本身只怕会用到。大家在JavaScript中应用机动物检疫查代码错误的工具了,而且发现它真的很有裨益。
  • 作者明日还平素不选拔sourcemaps【译者注:详见
  • 本身前几天并不曾创制2个真的意义上的模版库。可是考虑到那么些网站也是用到了模版,所以小编以为建三个视觉模板库也是贰个好主意。那样在重重地点都得以直接拿来用,特别便宜也尤其模块化。

    赞 收藏
    评论

@each

语法为:@each $var in <list or
map>。在那之中$var表示变量,而list和map表示list类型数据和map类型数据。sass
3.3.0新出席了多字段循环和map数据循环。

$list: adam john wynn mason kuroir; //$list 就是一个列表
@mixin author-images {
    @each $author in $list {
        .photo-#{$author} {
            background: url("vatars/#{$author}.png") no-repeat;
        }
    }
}
.author-bio {
    @include author-images;
}

5. Sass中的函数

@function double($n) {
  @return $n * 2;
}
#sidebar {
  width: double(5px);
}

全体的松开函数

  • 字符串函数

    • unquote
    • quote
    • To-upper-case
    • To-lower-case
    • percentage

    .footer{
      width : percentage(.2)
    }
    

  • round
  • ceil
  • floor
  • abs
  • min
  • max
  • random

  • 列表函数

    • length 取列表数据的尺寸
    • nth (10px 20px 30px, 1)
    • join join(10px 20px, 30px 40px)
    • append append(10px 20px ,30px)
    • zip zip(1px 2px 3px,solid dashed dotted,green blue red)
    • index index(1px solid red, solid)
    • type-of type-of(100)
    • unit 取单位
    • unitless 判断贰个值是还是不是带有单位
    • comparable 判断三个数是还是不是足以开始展览加减合并
    • if(true,1px,2px)
  • Maps 函数

    • map-get
    • map-has-key
    • map-keys
    • map-values
    • map-merge
    • map-remove
    • keywords

    $map: (
      $key1: value1,
      $key2: value2,
      $key3: value3
    )   
    
    $map: (
      key1: value1,
      key2: (
        key-1: value-1,
        key-2: value-2,
      ),
    key3: value3
    );
    
    $theme-color: (
      default: (
          bgcolor: #fff,
          text-color: #444,
          link-color: #39f
      ),
      primary:(
          bgcolor: #000,
          text-color:#fff,
          link-color: #93f
      ),
      negative: (
          bgcolor: #f36,
          text-color: #fefefe,
          link-color: #d4e
      )
    );
    
    /* map-get */
    $social-colors: (
      dribble: #ea4c89,
      facebook: #3b5998,
      github: #171515,
      google: #db4437,
      twitter: #55acee
    );
    .btn-dribble{
      color: map-get($social-colors,facebook);
    }
    /* 没有值不会报错 */
    .btn-weibo{
      font-size: 12px;
      color: map-get($social-colors,weibo);
    }
    
    /* map中的容错函数 */
    @function colors($color){
      @if not map-has-key($social-colors,$color){
          @warn "No color found for `#{$color}` in $social-colors map. Property omitted.";
      }
      @return map-get($social-colors,$color);
    }
    .btn-dribble {
      color: colors(dribble);
    }
    
    /* each 遍历 map */
    @each $name in map-keys($social-colors){
      .btn-#{$name}{
          color: colors($name);
      }
    }
    @for $i from 1 through length(map-keys($social-colors)){
      .btn-#{nth(map-keys($social-colors),$i)} {
        color: colors(nth(map-keys($social-colors),$i));
      }
    }
    
    map-values($social-colors)
    /*得到所有的值*/
    
    $color: (
      text: #f36,
      link: #f63,
      border: #ddd,
      backround: #fff
    );
    $typo:(
      font-size: 12px,
      line-height: 1.6
    );
    $newcolor = map-merge($color, $typo);
    
    /* 得到新值 */
    $map:map-remove($social-colors,dribble);
    

  • 水彩函数

    • rgb

    • rgba

    • red

    • green

    • blue

    • mix 混合二种颜色 第四个参数为率先种颜色的比重 mix(blue,red,百分之二十)

    • lighten lighten(red, 20%);

    • darken darken(red,30%);

    • saturate 改变颜色的饱和度 参数单位为百分比 saturate(blue,十分二)

    • desaturate

    • adjust-hue 通过调整色相 adjust-hue(blue,30deg)

    • grayscale 直接让饱和度为0 grayscale(blue);

    • 阿尔法 获取反射率

    • opacity 获取光滑度

    • rgba

    • opacify 扩张光滑度

    • fade-in 增添反射率

    • transparentize 减弱发光度

    • fade-out 减少反射率

    <ul class="swatches red">
      <li></li>
      ...      
      <li></li>
    </ul>
    <ul class="swatches orange">
      <li></li>
      …
      <li></li>
    </ul>
    <ul class="swatches yellow">
      <li></li>
      …
      <li></li>
    </ul>
    <ul class="swatches green">
      <li></li>
      …
      <li></li>
    </ul>
    <ul class="swatches blue">
      <li></li>
      …
      <li></li>
    </ul>
    <ul class="swatches purple">
      <li></li>
      …
      <li></li>
    </ul>
    
    $redBase: #DC143C;
    $orangeBase: saturate(lighten(adjust_hue($redBase, 39), 5), 7);//#f37a16
    $yellowBase: saturate(lighten(adjust_hue($redBase, 64), 6), 13);//#fbdc14
    $greenBase: desaturate(darken(adjust_hue($redBase, 102), 2), 11);//#73c620
    $blueBase: saturate(darken(adjust_hue($redBase, 201), 2), 1);//#12b7d4
    $purpleBase: saturate(darken(adjust_hue($redBase, 296), 2), 1);//#a012d4
    $blackBase: #777;
    $bgc: #fff;
    
    //定义颜色变暗的 mixin
    @mixin swatchesDarken($color) {
      @for $i from 1 through 10 {
        $x:$i+11;
        li:nth-child(#{$x}) {
          $n:$i*5;
          $bgc:darken($color,$n); //颜色变暗
          background-color: $bgc;
          &:hover:before { //hover状态显示颜色编号
            content: "#{$bgc}";
            color: lighten($bgc,40);
            font-family: verdana;
            font-size: 8px;
            padding: 2px;
          }
        }
      }
    }
    //定义颜色变亮的 mixin
    @mixin swatchesLighten($color) {
      @for $i from 1 through 10 {
        $x:11-$i;
        li:nth-child(#{$x}) {
          $n:$i*5;
          $bgc:lighten($color,$n);
          background-color: $bgc;
          &:hover:before {
            content: "#{$bgc}";
            color: darken($bgc,40);
            font-family: verdana;
            font-size: 8px;
            padding: 2px;
          }
        }
      }
    }
    
    .swatches li {    
      width: 4.7619047619%;
      float: left;
      height: 60px;
      list-style: none outside none;
    }
    
    ul.red {
      @include swatchesLighten($redBase);
      @include swatchesDarken($redBase);
      li:nth-child(11) {
        background-color: $redBase;
      }
    }
    
    ul.orange {
      @include swatchesLighten($orangeBase);
      @include swatchesDarken($orangeBase);
      li:nth-child(11) {
        background-color: $orangeBase;
      }
    }
    
    ul.yellow {
      @include swatchesLighten($yellowBase);
      @include swatchesDarken($yellowBase);
      li:nth-child(11) {
        background-color: $yellowBase;
      }
    }
    
    ul.green {
      @include swatchesLighten($greenBase);
      @include swatchesDarken($greenBase);
      li:nth-child(11) {
        background-color: $greenBase;
      }
    }
    
    ul.blue {
      @include swatchesLighten($blueBase);
      @include swatchesDarken($blueBase);
      li:nth-child(11) {
        background-color: $blueBase;
      }
    }
    
    ul.purple {
      @include swatchesLighten($purpleBase);
      @include swatchesDarken($purpleBase);
      li:nth-child(11) {
        background-color: $purpleBase;
      }
    }
    
    ul.black {
      @include swatchesLighten($blackBase);
      @include swatchesDarken($blackBase);
      li:nth-child(11) {
        background-color: $blackBase;
      }
    }
    

关于小编:maple

美高梅开户网址 2

西安外国语大学大三野生码农一个,希望能做一个有心情的程序员。今日头条新浪:@Maple_eitgithub:

个人主页 ·
笔者的篇章 ·
10

美高梅开户网址 3

5. Sass中的函数

sass定义了无数函数可供使用,当然你也能够团结定义函数,以@fuction开首。sass的官方函数链接为:sass
fuction,实际项目中大家使用最多的应该是颜色函数,而颜色函数中又以lighten减淡和darken加深为最,其调用方法为lighten($color,$amount)和darken($color,$amount),它们的首先个参数都以颜色值,第①个参数都是比例。

@function double($n) {
  @return $n * 2;
}
#sidebar {
  width: double(5px);
}

6. Sass的@规则

  • @import

  • @media

    .sidebar {
      width: 300px;
      @media screen and (orientation: landscape) {
        width: 500px;
      }
    }
    @media screen {
      .sidebar {
        @media (orientation: landscape) {
          width: 500px;
        }
      }
    }
    
    $media: screen;
    $feature: -webkit-min-device-pixel-ratio;
    $value: 1.5;
    
    @media #{$media} and ($feature: $value) {
      .sidebar {
        width: 500px;
      }
    }
    
  • @extend

  • @at-root

  • @debug

  • @warn

  • @error

  • @content

    $small : 750px;
    @mixin  onsmall {
      @media  only screen and (max-width: $small){
        @content;
      }
    }
    
    .navbar-content{
      max-width:980px;
      @include onsmall {
        min-width:320px;
      }
    }
    

@mixin useRem($size){
  $device-list : 320px, 375px , 414px;
  html{
    @each $device in $device-list{
      @media screen and (min-width: $device){
        font-size: 100px * ($device/$size);
      }
    }
  }
}
@include useRem(750px);

成套的内置函数

  • 字符串函数

  • unquote

  • quote

  • To-upper-case

  • To-lower-case

  • percentage

  • round

  • ceil

  • floor

  • abs

  • min

  • max

  • random

  • 列表函数

  • length 取列表数据的长短

  • nth (10px 20px 30px, 1)

  • join join(10px 20px, 30px 40px)

  • append append(10px 20px ,30px)

  • zip zip(1px 2px 3px,solid dashed dotted,green blue red)

  • index index(1px solid red, solid)

  • type-of type-of(100)

  • unit 取单位

  • unitless 判断2个值是还是不是带有单位

  • comparable 判断多个数是还是不是足以拓展加减合并

  • if(true,1px,2px)

  • Maps 函数

  • map-get

  • map-has-key

  • map-keys

  • map-values

  • map-merge

  • map-remove

  • keywords

/* map-get */
$social-colors: (
  dribble: #ea4c89,
  facebook: #3b5998,
  github: #171515,
  google: #db4437,
  twitter: #55acee
);
.btn-dribble{
  color: map-get($social-colors,facebook);
}
/* 没有值不会报错 */
.btn-weibo{
  font-size: 12px;
  color: map-get($social-colors,weibo);
}

/* map中的容错函数 */
@function colors($color){
  @if not map-has-key($social-colors,$color){
      @warn "No color found for `#{$color}` in $social-colors map. Property omitted.";
  }
  @return map-get($social-colors,$color);
}
.btn-dribble {
  color: colors(dribble);
}

/* each 遍历 map */
@each $name in map-keys($social-colors){
  .btn-#{$name}{
      color: colors($name);
  }
}
@for $i from 1 through length(map-keys($social-colors)){
  .btn-#{nth(map-keys($social-colors),$i)} {
    color: colors(nth(map-keys($social-colors),$i));
  }
}

map-values($social-colors)
/*得到所有的值*/

$color: (
  text: #f36,
  link: #f63,
  border: #ddd,
  backround: #fff
);
$typo:(
  font-size: 12px,
  line-height: 1.6
);
$newcolor = map-merge($color, $typo);

/* 得到新值 */
$map:map-remove($social-colors,dribble);
  • 水彩函数

sass中合拢了大气的颜色函数,让变换颜色尤其简便易行。

  • rgb、 rgba
  • mix 混合两种颜色 第伍个参数为第叁种颜色的比重 mix(blue,red,五分之一)
  • lighten lighten(red, 20%);
  • darken darken(red,30%);
  • saturate 改变颜色的饱和度 参数单位为百分比 saturate(blue,十分二)
  • adjust-hue 通过调整色相 adjust-hue(blue,30deg)
  • grayscale 直接让饱和度为0 grayscale(blue);
  • 阿尔法、opacity 获取光滑度
  • opacify、 fade-in 扩充发光度
  • transparentize 、 fade-out收缩光滑度

<ul class="swatches red">
  <li></li>
  ...      
  <li></li>
</ul>
<ul class="swatches orange">
  <li></li>
  …
  <li></li>
</ul>
<ul class="swatches yellow">
  <li></li>
  …
  <li></li>
</ul>
<ul class="swatches green">
  <li></li>
  …
  <li></li>
</ul>
<ul class="swatches blue">
  <li></li>
  …
  <li></li>
</ul>
<ul class="swatches purple">
  <li></li>
  …
  <li></li>
</ul>

$redBase: #DC143C;
$orangeBase: saturate(lighten(adjust_hue($redBase, 39), 5), 7);//#f37a16
$yellowBase: saturate(lighten(adjust_hue($redBase, 64), 6), 13);//#fbdc14
$greenBase: desaturate(darken(adjust_hue($redBase, 102), 2), 11);//#73c620
$blueBase: saturate(darken(adjust_hue($redBase, 201), 2), 1);//#12b7d4
$purpleBase: saturate(darken(adjust_hue($redBase, 296), 2), 1);//#a012d4
$blackBase: #777;
$bgc: #fff;

//定义颜色变暗的 mixin
@mixin swatchesDarken($color) {
  @for $i from 1 through 10 {
    $x:$i+11;
    li:nth-child(#{$x}) {
      $n:$i*5;
      $bgc:darken($color,$n); //颜色变暗
      background-color: $bgc;
      &:hover:before { //hover状态显示颜色编号
        content: "#{$bgc}";
        color: lighten($bgc,40);
        font-family: verdana;
        font-size: 8px;
        padding: 2px;
      }
    }
  }
}
//定义颜色变亮的 mixin
@mixin swatchesLighten($color) {
  @for $i from 1 through 10 {
    $x:11-$i;
    li:nth-child(#{$x}) {
      $n:$i*5;
      $bgc:lighten($color,$n);
      background-color: $bgc;
      &:hover:before {
        content: "#{$bgc}";
        color: darken($bgc,40);
        font-family: verdana;
        font-size: 8px;
        padding: 2px;
      }
    }
  }
}

.swatches li {    
  width: 4.7619047619%;
  float: left;
  height: 60px;
  list-style: none outside none;
}

ul.red {
  @include swatchesLighten($redBase);
  @include swatchesDarken($redBase);
  li:nth-child(11) {
    background-color: $redBase;
  }
}

ul.orange {
  @include swatchesLighten($orangeBase);
  @include swatchesDarken($orangeBase);
  li:nth-child(11) {
    background-color: $orangeBase;
  }
}

ul.yellow {
  @include swatchesLighten($yellowBase);
  @include swatchesDarken($yellowBase);
  li:nth-child(11) {
    background-color: $yellowBase;
  }
}

ul.green {
  @include swatchesLighten($greenBase);
  @include swatchesDarken($greenBase);
  li:nth-child(11) {
    background-color: $greenBase;
  }
}

ul.blue {
  @include swatchesLighten($blueBase);
  @include swatchesDarken($blueBase);
  li:nth-child(11) {
    background-color: $blueBase;
  }
}

ul.purple {
  @include swatchesLighten($purpleBase);
  @include swatchesDarken($purpleBase);
  li:nth-child(11) {
    background-color: $purpleBase;
  }
}

ul.black {
  @include swatchesLighten($blackBase);
  @include swatchesDarken($blackBase);
  li:nth-child(11) {
    background-color: $blackBase;
  }
}

6. Sass的@规则


  • @import(sass的导入规则和CSS的截然不相同,编写翻译时会将@import的scss文件合并进来只生成1个CSS文件。)

  • @media

.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}
@media screen {
  .sidebar {
    @media (orientation: landscape) {
      width: 500px;
    }
  }
}

$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;

@media #{$media} and ($feature: $value) {
  .sidebar {
    width: 500px;
  }
}
  • @extend

  • @at-root

  • @debug

  • @warn

  • @error

  • @content

$small : 750px;
@mixin  onsmall {
  @media  only screen and (max-width: $small){
    @content;
  }
}

.navbar-content{
  max-width:980px;
  @include onsmall {
    min-width:320px;
  }
}

//响应式让适应设备的屏幕尺寸
@mixin useRem($size){
  $device-list : 320px, 375px , 414px;
  html{
    @each $device in $device-list{
      @media screen and (min-width: $device){
        font-size: 100px * ($device/$size);
      }
    }
  }
}
@include useRem(750px);

sass的基础知识基本就是这个,在工作中,常用到的也是变量,嵌套,混合宏,以及她的高等级本性和函数,而且一旦通晓了一种预处理语言,以往学习另一种就会不难很多,就能融会贯通,立立刻手了,所以基础理解牢固至关心重视要。要是大家想深刻学习掌握,能够友善安装上试一试,用一用,会帮你少写过多代码哦!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图