ホームページ > 記事 > ウェブフロントエンド > Sass と Compass の入門_html/css_WEB-ITnose
Sass と Compass の入門_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:46:111079ブラウズ
一./*予備知識*/
1.Sass とは何ですか?
Sass を使用すると、CSS ワークフローが簡素化され、CSS の拡張とメンテナンスの作業が簡単になります。たとえば、顧客のニーズが変化したため、検索と置換によってピクセル値を常に変更する必要があったときや、複数列レイアウトの列の幅を決定するには、ソフトウェアを使用する必要があったことがあります。ピクセル値の計算が完了しました。
Sass は、変数、ミックスイン、ネスト、セレクター継承 などのいくつかの新しい概念を導入し、整理と保守が容易な適切にフォーマットされた CSS コードを生成します。
SASSはCSS3（Cascading Style Sheet）の構文を拡張したもので、ネスト、ミックスイン、セレクター継承などの機能が利用でき、より効率的かつ柔軟にスタイルシートを記述することができます。
Sass は最終的に合法的な CSS をコンパイルして、ブラウザーで使用できるようにします。これは、独自の構文をブラウザーが認識するのが容易ではないことを意味します (ただし、CSS 構文と非常に似ており、ほぼ同じです)。標準の CSS 形式は、その構文内で動的変数などを使用できるため、非常に単純な動的言語に似ています。
2. Compass とは何ですか?
Compass は、SASS のコアチームメンバーである Chris Eppstein によって作成されました。これには、定義された多数のミックスイン、関数、SASS の拡張機能が含まれています。 。 2./*Sass と Compass のインストール*/
// SASS は
Ruby 言語で書かれていますが、この 2 つの構文はそれとは何の関係もありません。 Ruby を理解していなくても、使用できます。ただ、 Ruby を最初にインストールし、次に SASS をインストールする必要があります。 // Ruby がインストールされていると仮定して、コマンドラインに次のコマンドを入力します:
1 1.gem安装Sass 2 C:\Users\DELL>gem install sass 3 4 2.查看Sass版本 5 C:\Users\DELL>sass -v 6 Sass 3.4.13 (Selective Steve) 7 8 3.编译Sass文件 9 sass main.scss main css10 // 一般很少使用sass命令,一般都是用Compass命令;11 12 4.gem安装Compass13 C:\Users\DELL>gem install compass14 15 5.查看Compass版本16 C:\Users\DELL>compass -v17 Compass 1.0.3 (Polaris)
1 6.Compass搭建项目 2 C:\Users\DELL\compass create sass 3 // 结果:↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 5 directory sass/ 6 directory sass/sass/ // sass文件所在目录; 7 directory sass/stylesheets/ // css文件所在目录; 8 create sass/config.rb // 项目配置文件; 9 create sass/sass/screen.scss // 主要针对屏幕的sass文件;10 create sass/sass/print.scss // 主要针对打印设备;11 create sass/sass/ie.scss // 主要针对IE浏览器;12 write sass/stylesheets/ie.css13 write sass/stylesheets/print.css14 write sass/stylesheets/screen.css // scss文件编译后对应的css文件;最终将引入到HTML中的文件;15 16 // You may now add and edit sass stylesheets in the sass subdirectory of your project.17 // 你现在可以在sass文件的子文件中(screen.scss/print.scss/ie.scss)添加和编辑项目的样式表;18 19 // Sass files beginning with an underscore are called partials and won't be compiled to CSS, but they can be imported into other sass stylesheets.20 //<strong> Sass文件以"_"开头的叫做局部文件</strong>,<strong>不会被编译成CSS;但它们可以被引入到其他Sass文件中;</strong>21 22 // You can configure your project by editing the config.rb configuration file.23 // 你可以通过编辑config.rb配置文件来配置项目信息; 24 25 // You must compile your sass stylesheets into CSS when they change.26 //<strong> 当Sass文件被修改后,必须要编译Sass文件到CSS;</strong>27 28 // 1. To compile on demand: // 直接编译; 29 //<strong> compass compile</strong> [path/to/project]30 // 2. To monitor your project for changes and automatically recompile: 31 //<strong> compass watch</strong> [path/to/project] // 监听项目变化并且自动编译; 32 33 // To import your new stylesheets add the following lines of HTML (or equivalent) to your webpage:34 // <head>35 // <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />36 // <link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" />37 // <!--[if IE]>38 // <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />39 // <![endif]-->40 // </head>41 //<strong> 将编译后的文件引入到HTML页面中;</strong>
三./*Sass 構文の基本*/
1 1.scss和sass文件转换 2 sass-convert main.scss main.sass 3 // 将scss文件转换为sass文件; 4 5 2.开启监听编译 6 C:\Users\DELL>cd sass 7 // 进入项目文件夹; 8 C:\Users\DELL\sass><strong>compass watch </strong> 9 >>> Compass is watching for changes. Press Ctrl-C to Stop.10 // 开启监听并自动编译;11 12 3.变量13 //<strong> Sass通过"$"声明变量;</strong>14 >1.声明变量15 $headline-ff:"宋体",Arial,sans-serif;16 $main-sec-ff:Arial,sans-serif;17 >2.引用变量18 .headline {19 font-family:<strong> $headline-ff; </strong>20 }21 .main-sec {22 font-family: <strong>$main-sec-ff; </strong>23 }24 25 4.@import引入文件26 >1.新建局部文件27 _variables.scss28 //<strong> 以"_"开头的局部文件,不会被编译到css;作为引入文件使用;</strong>29 >2.@import引入文件30 @improt "variables";31 // 基于Sass的既定规则:32 //<strong> 1.没有文件后缀名的时候,sass会添加.scss或.sass的后缀;</strong>33 //<strong> 2.用同一目录下,局部文件和非局部文件不能重名;</strong>34 >3.使用css原生@import的既定规则:35 >>1.当@import后边跟的文件名是以".css"结尾的时候;36 >>2.当@import后边跟的是"http://"开头的字符串的时候;37 >>3.当@import后边跟的是一个url()函数的时候38 >>4.当@import后边带有media queries的时候;39 40 5.注释41 >1.以"/**/"注释的内容最后被输出到了对应的css文件中;42 >2.以"//"注释的内容则没有输出到对应的css文件;43 44 6.<strong>类嵌套语法 </strong>45 .main-sec{46 font-family: $main-sec-ff;47 .headline {48 font-family: $main-sec-ff;49 }50 }51 52 7.<strong>属性嵌套语法 </strong>53 .headline {54 font:{55 family:$main-sec-ff;56 size:16px;57 }58 }59 60 8.<strong>父类选择器(自身调用) </strong>61 a {62 &:hover {63 color:red;64 }65 }
IV./*Sass 構文の上級
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。