css预处理器sass使用教程(多图预警)

@charset "utf-8";
/*
* CSS扩展
*/
/*嵌套规则*/
#main{
    width:100px;
    p, div{
        font-size:2em;
        a{
            font-weight: bold;
        }
    }
}
/*引用父选择器*/
a{
    text-decoration: none;
    font-weight: lighter;
    &:hover{
        text-decoration:underline;
        font-weight: bolder;
    }
    body.firefox &{
        color:red;
    }
}
#main{
    color:red;
    a{
        font-size: 20px;
        &:hover{
            color:blue;
        }
    }
}
/*嵌套属性*/
.fun{
    font:{
        family:"微软雅黑";
        size:16px;
        weight:bolder;
    }
}
/* 占位符选择器: %foo 
Sass 支持一种特殊类型的选择器,叫做"占位符选择器" 
](placeholder selector)。这些看起来像 class 和 id 
选择器，除了# 或.用%替换。他们需要在@extend 指令中使用;
*/
/*
*  Sassscript
*/
/* 交互式 shell */
/*
Interactive Shell 可以在命令行中测试 SassScript 的功能。
在命令行中输入 sass -i，然后输入想要测试的 SassScript 
查看

输出结果： sass -i >> "Hello, Sassy World!" "Hello, Sassy World!" >> 1px + 1px + 1px 3px >> #777 + #777 #eeeeee >> #777 + #888 white */ /* 变量：变量仅在它定义的选择器嵌套层级的范围内可用 （愚人码头注：可以理解为块级作用域）。不在任何嵌 套选择器内定义的变量则在可任何地方使用（愚人码头 注：可以理解为全局变量）。定义变量的时候可以后面 带上!global标志，在这种情况下，变量在任何地方可 见（愚人码头注：可以理解为全局变量） */ #bod{ $width:100px !global; width:$width; } #ref{ width:$width; } /* 数据类型：SassScript 支持 7 种主要的数据类型 数字、文本字符串、颜色、布尔值、空值、值列表 (list)、maps */ @mixin firefox-message($select){ body #{$select}:before{ color:red; content: "hi"; } } @include firefox-message(".header"); /* 插值 */ $name : son; $color :blue; p.#{$name}{ color:#{color}; } /* SassScript中的& 就像当它在选择器中使用一样，SassScript中的&指向 当前父选择器。下面是一个逗号分隔的列表（list） 中包含一个空格的分隔列表（list） */ @mixin does-parent-exist { @if & { &:hover { color: red; } } @else { a { color: red; } } } @include does-parent-exist; /* 变量默认: !default 如果分配给变量的值后面添加了!default标志 ， 这意味着该变量如果已经赋值，那么它不会被重 新赋值，但是，如果它尚未赋值，那么它会被赋 予新的给定值。 */ $content: "Second content?" !default; $content: "First content"; $new_content: "First time reference" !default; #main { content: $content; new-content: $new_content; } /* @media */ .silder{ width: 300px; @media screen and (max-width: 500px) { width:500px; } } $media: screen; $feature: -webkit-min-device-pixel-ratio; $value: 1.5; @media #{$media} and ($feature: $value) { .sidebar { width: 500px; } } /* @extend */ .error{ border: 1px #f00; background-color: #fdd; } .seriousError{ @extend .error; border-width: 3px; } #fake-links .link { @extend a.class; font-size: 18px; } a.class{ color:blue; &:hover{ color:red; } } /* @extend-Only 选择器 占位选择器看起来很像普通的 class 和 id 选择器， 只是 # 或 . 被替换成了 %。他可以像 class 或者 id 选择器那样使用，而它本身的规则，不会被编译 到 CSS 文件中，如下 */ #context a%extreme { color: blue; font-weight: bold; font-size: 2em; } /* 占位符选择器，就像class和id选择器那样可以用于扩展。 扩展选择器，将会编译成CSS，占位符选择器本身不会被 编译。例如： */ .notice { @extend %extreme; } /* !optional 标记:主要是避免扩展时如果没有某个选择器，会报错 */ a.important { @extend .noticeqq !optional; } /* * *控制指令和表达式 * */ /*@if 语法*/ $type : monster; p{ @if $type == ocean { color: red; } @else if $type == matator{ color: blue; } @else if $type == monster{ color: green; } @else { color: black; } } /*@for 语法*/ /* @for指令重复输出一组样式。对于每次重复，计数器变量用于 调整输出结果。该指令有两种形式：@for $var from through 和 @for $var from to 。注意 关键字through 和 to的区别。$var可以是任何变量名，比如$i; 和 是应该返回整数的SassScript表达式。当 比大的时候，计数器将递减，而不是增量。 @for语句将设置$var为指定的范围内每个连续的数值，并且每 一次输出的嵌套样式中使用$var的值。对于from ... through 的形式，范围包括和的值，但from ... to的形式 从开始运行，但不包括的值。 */ @for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; } } @for $i from 5 to 3 { .item-#{$i} { width: 2em * $i; } } /*@each @each指令通常格式是@each $var in 。$var可以 是任何变量名，像$length 或者 $name，和是一 个返回列表（list）或 map 的 SassScript 表达式。 @each 规则将$var设置为列表（list）或 map 中的每个项目， 输出样式中包含使用$var的值 */ @each $animal in puma, sea-slug, egret, salamander { .#{$animal}-icon { background-image: url('/images/#{$animal}.png'); } } /*多重赋值*/ @each $animal, $color, $cursor in (puma, black, default), (sea-slug, blue, pointer), (egret, white, move) { .#{$animal}-icon { background-image: url('/images/#{$animal}.png'); border: 2px solid $color; cursor: $cursor; } } @each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) { #{$header} { font-size: $size; } } /* @while 指令重复输出嵌套样式，直到SassScript表达式返回结果 为false。这可用于实现比@for语句更复杂的循环 */ $i: 6; @while $i > 0 { .item-#{$i} { width: 2em * $i; } $i: $i - 2; } /* * *混入指令 * */ /* 混入(mixin)允许定义可以在整个样式表中重复使用的样式， 而避免了使用无语意的类（class），比如 .float-left。 混入(mixin)还可以包含所有的CSS规则，以及任何其他在Sass 文档中被允许使用的东西。他们甚至可以带arguments，引入变 量，只需少量的混入(mixin)代码就能输出多样化的样式。 */ /*1、定义一个混入(mixin):@mixin*/ @mixin large-text { font: { family: Arial; size: 20px; weight: bold; } color: #ff0000; } /*2、引入混合样式：@include*/ .page-title { @include large-text; padding: 4px; margin-top: 10px; } /* 混入（mixin）也可以包含在任何规则的外（即，在文档的根）, 只要它们不直接定义的任何属性或使用任何父选择器引用 */ @mixin silly-links { a { color: blue; background-color: red; } } @include silly-links; /*带参数*/ @mixin sexy-border($color, $width: 1in) { border: { color: $color; width: $width; style: dashed; } } p { @include sexy-border(blue); } h1 { @include sexy-border(blue, 2in); }

.button-narmol{
    position: relative;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
    color: #FFFFFF;
    border-radius: 3px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    overflow: hidden;
    cursor:pointer;
    &:after{
        content: " ";
        width: 200%;
        height: 200%;
        position: absolute;
        top: 0;
        left: 0;
        border: 1px solid rgba(0, 0, 0, 0.2);
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        box-sizing: border-box;
        border-radius: 10px;
    }
}
@mixin button-style-block($select,$color,$darken){
    #{$select}{
        display: block;
        padding-left: 14px;
        padding-right: 14px;
        font-size: 16px;
        line-height: 2.55555556;
        background-color: darken($color,$darken);
        @extend .button-narmol;
        &:active{
            background-color: darken($color,$darken+10%);
        }
    }
}
@mixin button-style-inline-block($select,$color,$darken){
    #{$select}{
        background-color: darken($color,$darken);
        display: inline-block;
        padding: 0 1.32em;
        line-height: 2.3;
        font-size: 13px;
        @extend .button-narmol;
        &:active{
            background-color: darken($color,$darken+10%);
        }
    }
}
@include button-style-block(".krui-btn_primary",#1AAD19,10%);
@include button-style-block(".krui-btn_error",#E64340,0%);
@include button-style-inline-block(".krui-btn_primary-small",#1AAD19,0%);

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>buttontitle>
    <link rel="stylesheet" href="css/button.css">
    <style type="text/css">
        span{
            margin-bottom: 20px;
        }
    style>
head>
<body>
    <span class="krui-btn_primary">登录span>
    <span class="krui-btn_primary-small">登录span>
    <span class="krui-btn_primary-small">登录span>
    <span class="krui-btn_primary-small">登录span>
    <span class="krui-btn_primary-small">登录span>
    <span class="krui-btn_error">登录span>
    <span class="krui-btn_primary">登录span>
    <span class="krui-btn_primary">登录span>
body>
html>