高度な Sass への道、パート 1 (基本)_html/css_WEB-ITnose

Sass

Sass を学習する前に、CSS プリプロセッサについて知っておく必要があります。

CSS プリプロセッサは、 CSS をターゲットとして使用してファイルを生成する新しい言語です。その後、開発者はコーディング作業にのみこの言語を使用する必要があります。通常、プリプロセッサはブラウザの互換性、変数、構造体、その他の関数を実装できるため、コードがより簡潔になり、保守が容易になります。

CSS プリプロセッサと Sass の関係は何ですか? Sass は他にも 2 つのタイプの CSS プリプロセッサがあります: Less と Stylus です。

Sass とは

• Sass は、CSS 開発を容易にするだけでなく、多くの便利な記述方法を提供する CSS 開発ツールです。シンプルで保守しやすいだけでなく、開発時間を大幅に節約できます。

Sass と Css

• css は、ネストを完了することができないため、実際のプログラミング言語ではありません。 、継承、変数の設定など。
• Sass は css の欠点を補うために、css を前処理する「中間言語」です。

.scss と .sass

• .sass
  • 元々は haml と一致するように設計されているため、haml と同じインデント形式になります
• .scss
  • 第 3 世代以降、インデントされたスタイルは保持され、通常の CSS コードと完全に下位互換性があります

とはCompass は Compass です

Compass は Sass 用のツール ライブラリです。詳細についてはここをクリックしてください

• Sass と Compass
  • Sass との関係Compass は JavaScript と JQuery の関係に似ています。
• Sass と Compass でできることは何ですか?
• Sass と Compass のインストール
  • 国内ニーズ FQ
  • FQ にお金がない場合は、タオバオのミラーを使用してソースを変更するだけです
    • $ gemsources --add https://ruby.taobao.org/ -- delete https:// /rubygems.org/
  • compass をインストールするには、gem install compass コマンドを実行します。
  • コマンドを実行します。 compass -v インストールが成功したかどうかを確認します。 インストールが成功した場合は、コマンド sass -v を実行して、インストールが成功したかどうかを確認します。成功すると、バージョン番号がコンソールに出力されます。
  Sass 基本構文

Compile scss

sass

合計 4 つの出力スタイルがあります
• • 1. 🎜>
  2. 展開
3. コンパクト

4. 圧縮

1.body {2. background-color: #f00; }3.4..person, .son {5. height: 100px; }6.7./*# sourceMappingURL=demo1.css.map */

生産ライン

1./* line 1, ../sass/demo1.scss */2.body {3. background-color: #f00;4.}5.6./* line 4, ../sass/demo1.scss */7..person, .son, .banner {8. height: 100px;9.}10.11./* line 7, ../sass/demo1.scss */12..son, .banner {13. height: 100px;14.}15.

1./* line 1, ../sass/demo1.scss */2.body { background-color: #f00; }3.4./* line 4, ../sass/demo1.scss */5..person, .son, .banner { height: 100px; }6.7./* line 7, ../sass/demo1.scss */8..son, .banner { height: 100px; }9.

sass コマンドの使用 ファイルとフォルダーを監視するには

• Sass ファイルを監視するには:

sass - -watch :

1.body{background-color:red}.person,.son,.banner{height:100px}.son,.banner{height:100px}

ウォッチ フォルダー

sass --watch : >
compass sass を使用してコンパイルします
• • compass ディレクトリを作成し、compass create フォルダー名を実行します
  作成されたファイルを確認しますディレクトリ構造を見ると、このコマンドで合計 2 つのフォルダー (それぞれ

) が作成されていることがわかります。それらは、sass ファイルの保存に使用され、後者はコンパイルされた CSS ファイルの保存に使用されます。

必要なのは、関連する scss を配置することだけです。sass フォルダーに入り、compass コンパイル コマンドを実行してコンパイルします。コンパイルされたファイルは、スタイルシート フォルダー

• に自動的に配置されます。フォルダーを監視
  • コマンド compass watch を実行します
  • 接尾辞 -force を追加すると、ファイルが変更されるかどうかに関係なく、ファイルが再コンパイルされることを意味します
  compass watch --force
• エラーを報告しないように中国語を設定します
  • ruby がインストールされているディレクトリに従ってパスが検索されます
  • C:Ruby22-x64librubygems2.2.0gemssass-3.4.20libsassengine.rb
  • 次のコードを追加します Encoding.default_external = Encoding.find('utf-8')
• • Sass Start
  • 1.sass はブロックレベルのスコープを使用します
  2. 変数はローカル変数とグローバル変数に分割されます

ブロックレベルのスコープで変数を宣言し、それを別のブロックレベルのスコープで使用する場合は、!global を追加する必要があります。追加しないと、この変数が別のブロックレベルのスコープで使用されるとエラーが報告されます。

1.// scss2.body {3.    /*$color: red;4. color: $color; 局部变量,下面访问不到, 所以编译会报错,如果想要下面能够访问到的话. 只需要后面加上!global就可以了*/5.    $color: red !global; /*这样就可以吧局部变量变为全局变量*/6.    color: $color;7.}8.9.footer {10.    color: $color;// 这里也不会报错11.}

3.变量默认值

• 在变量后面,分号前面加上 !default
• 作用: 如果首先定义了一个变量 $color: red,那么第二次继续赋值为 $color: green,此时 $color的值为 green, 如果第二次赋值的时候在变量后面加上一个 !default标识的话,就不会覆盖上次的赋值.这说明,加上 !default标识的语句会被优先编译和赋值.
• 下面代码是没有加default

1.// scss2.$fontSize: 12px;3.$fontSize: 16px;4..one {5.    font-size: $fontSize;6.}7.// 生成的css8.body { color: red; }9.footer { color: red; }10..one { font-size: 16px; }

• 下面代码加上了 !default

1.// scss2.$fontSize: 12px;3.$fontSize: 16px !default;4..one {5.    font-size: $fontSize;6.}7.// 生成的css8.body { color: red; }9.footer { color: red; }10..one { font-size: 12px; }11.

4. 多值变量

4.1 nth: 语法 nth(variable,index);

• 需要注意的是它的索引是从1开始的

1.// scss2.$color: red;3.$maps: (borderColor: red, backgroundColor: blue);4.$paddings: 10px 20px 30px 40px;5.$padding1: 3px 20px 30px 40px;6.body {7.    color: $color;  8.}9.10.footer {11.    color: $color;12.    padding: $paddings;13.    padding-left: nth($padding1,1);14.}15.16.// 生成的css17.18.body { color: red; }19.footer { color: red; padding: 10px 20px 30px 40px; padding-left: 3px; }

4.2 map-get: 语法 map-get(variable, key)

• variable语法 $maps: (borderColor: red, backgroundColor: blue);
• 有两点需要注意一下
  • 当variable错误的时候,会报错
  • 当key不存在的时候,不会编译这条语句,也就是说这条css不会编译出来

1.// scss2.$color: red;3.$paddings: 10px 20px 30px 40px;4.$padding1: 3px 20px 30px 40px;5.$maps: (borderColor: red, backgroundColor: blue);6.body {7.    color: $color;  8.}9.10.footer {11.    color: $color;12.    padding: $paddings;13.    padding-left: nth($padding1,1);14.    border-color: map-get($maps, borderColor);15.    background-color: map-get($maps, backgroundColor);16.}17.18.// 生成的css19.body { color: red; }20.footer { color: red; padding: 10px 20px 30px 40px; padding-left: 3px; border-color: red; background-color: blue; }

5. 变量的特殊用法

5.1 变量用在属性或者选择器上

• 当变量挡住属性来使用的时候 #{变量名}
• 当变量当做类名来使用的时候’.#{变量名}{}’

1.// scss2.$className: container; // 变量的特殊用法3.$bgc: background-color;4..#{$className} {5.    width: 100px;6.    height: 100px;7.    #{$bgc}: $color;8.}9.// 生成的css10..container { width: 100px; height: 100px; background-color: red; }

5.2 变量的使用中横线还是下划线,都是一个变量 怎么用取决于你的爱好

1.//scss2.$font-size: 19px;3..font-size {4.    font-size: $font_size;5.}6.// 生成的css7..font-size { font-size: 19px; }

6.样式导入

6.1 部分文件

• 部分文件的名称约定以下划线开头
• 以下划线卡头的文件名称不会被编译

6.2 导入文件

• 因为原生导入css的方式和sass使用的关键词一致,为了区分使用了一些约定
• 原生css导入
  • 如果导入的文件名称以css结尾
  • 如果被导入的文件的名称是一个URL地址
  • 被导入的文件的名字是css的url()的值
• 以下三种情况会直接生成css,不作任何变化,会被当做原生的css导入

1.// scss2.@import "css.css";3.@import "http://xxx";4.@import url(css.css);5.// 生成的css6.@import url(css.css);7.@import "http://xxx";8.@import url(css.css);

• scss文件导入

1.// 这里我新建了一个文件名称叫做_part1.scss2.3.// _part1.scss 文件的样式4.$fontFamily: '微软雅黑';5..body {6.    font-family: $fontFamily;7.}8.9.// 在demo1.scss中导入10.@import "part1"; // 这样直接写,就会导入_part1.scss中的样式,这是约定.11.12.13.// demo1文件生成了以下的css14./* line 2, ../sass/_part1.scss */15..body { font-family: "微软雅黑"; }

7.scss嵌套常用

• & 相当于this
• @at-root跳出嵌套
  • 默认的 @at-root只能跳出选择器嵌套,不能跳出 @media和 @support
  • 如果需要跳出这两个嵌套的话需要设置 @at-root(without: media)和 @at-root(without: support)
  • 这个语法关键词有四个
    • all表示所有的
    • rule表示常规的
    • media表示media
    • support表示support,目前@support还无法广泛的使用
  • 我们的默认的 @at-root,其实就是 @at-root(without: rule)

1.body {2.    a {3.        height: 100px;4.        &:hover {5.            background-color: green;6.        }7.        // 跳出常规样式,对应着下面的行号 88.        @at-root .container {9.            height: 100px;10.        }11.        @media(min-width: 768px) {12.            // 跳出media和常规样式13.            @at-root(without: media rule) {14.                .container { // 这里对应下面的行号1415.                    height: 100px;16.               }17.            }18.            // 下面的样式只跳出了media 没有跳出常规样式,如果需要跳出常规样式的话需要设置,rule19.            @at-root(without: media) {20.                .container { // 这里对应行号2021.                    width: 1000px;22.                }23.            }24.        }25.    }26.    @media(max-width: 1000px) {27.        // 默认是跳出 rule28.        @at-root .container{ // 对应行号2829.            height: 1000px;30.        }31.        // 下面这句跳出media32.        @at-root(without: media rule) {33.            .container { // 对应行号3334.                width: 500px;35.            }36.        }37.    }38.}39.40.41.// css42.@charset "UTF-8";43./* line 2, ../sass/demo2.scss */44.body a { height: 100px; }45./* line 4, ../sass/demo2.scss */46.body a:hover { background-color: green; }47./* line 8, ../sass/demo2.scss */48..container { height: 100px; }49./* line 14, ../sass/demo2.scss */50..container { height: 100px; }51./* line 20, ../sass/demo2.scss */52.body a .container { width: 1000px; }53.54.@media (max-width: 1000px) { /* line 28, ../sass/demo2.scss */55.  .container { height: 1000px; } }56./* line 33, ../sass/demo2.scss */57..container { width: 500px; }

• &和 @at-root的嵌套用法

1.// scss2. @at-root .container {3.     color: red;4.     @at-root nav & {5.         color: blue; 6.     }7. }8.9.// out css10..container { color: red; }11.nav .container { color: blue; }

8. 继承

8.1 简单继承

• 使用关键字 @extend selector,代码如下

1.//scss2..alert {3.    height: 30px;4.}5..alert-info {6.    @extend .alert;7.    color: #D9EDF7;8.}9.// out css10..alert, .alert-info { height: 30px; }11..alert-info { color: #D9EDF7; }

8.2 多继承

• 同简单继承类似,语法: @extend selector1, selector2…………

1.// scss2..alert {3.    height: 30px;4.}5..bgc {6.    background-color: #f5f5f5;7.}8..alert-info {9.    @extend .alert, .bgc;10.    color: #D9EDF7;11.}12.13.// out css14..alert, .alert-info { height: 30px; }15..bgc, .alert-info { background-color: #f5f5f5; }16..alert-info { color: #D9EDF7; }

8.3 链型继承

• 什么是链式继承呢,按照自己的理解为,假如 c继承 b, b继承 a,那么 c同时拥有 b和 a的属性.这看起来像一条链条

1.// scss2..one {3.    border: 1px solid red;4.}5..two {6.    @extend .one;7.    color: red;8.}9..three {10.    @extend .two;11.    background-color: #f5f5f5;12.}13.14.// out css15..one, .two, .three { border: 1px solid red; }16..two, .three { color: red; }17..three { background-color: #f5f5f5; }

8.4 继承局限性

• 无法继承
  • 兄弟选择器是无法继承的( .one + .two)
  • 包含选择器也是无法继承的( .one .two {})
• 多余继承
  • 如果有hover属性,那么同样的hover属性也会被继承下来

8.5 继承交叉合并

• 同时继承两个选择器,但是,这两个选择器在同一条语句上面,就形成了 交叉继承.
• 这种用法不太容易控制,应当避免这种用法

1.a span{2.    height: 100px;3.}4.div .container {5.    @extend a, span; 6.}7.a span, div .container span, a div .container, div a .container, div .container .container { height: 100px; }

8.6 继承作用域

• 假如你在media里面定义了一个样式,那么此样式不能继承media之外的选择器.

1.// scss 这样写将会出错 ,2.// .three1 {width: 100px;} // 将media写在这里将会出错3.@media screen and (min-width:320px) and (max-width:639px){4.    .three1 {width: 100px;} // 写在这里下面的才可以继承5.    .container {6.        @extend .three1;7.        height: 100px;8.    }  9.}

9. 占位选择器

• %表示占位选择器, 不会生成到架构里面,只有用到它的时候才会生成

1.// scss2.%message {height: 30px;}3..message-danger {4.    @extend %message;5.    color: red;6.    font-size: 18px;7.    height: 30px;8.}9.10.// out css11..message-danger { height: 30px; }12..message-danger { color: red; font-size: 18px; height: 30px; }

好了基础篇完结了,接下来是进阶之路,依次会介绍数据类型,变量操作和内置函数等等, 写博客好费劲,我要坚持,坚持,咬牙坚持.作者的水平有限,文中若有疏漏,还请多多批评..谢谢!