Sass と Compass の入門_html/css_WEB-ITnose-htmlチュートリアル-php.cn

一./*予備知識*/

1.Sass とは何ですか?

2. Compass とは何ですか?

// SASS は

ホームページ

ウェブフロントエンド

htmlチュートリアル

Sass と Compass の入門_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:46 AM

一./予備知識/

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 までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7638

CakePHP チュートリアル

1391

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

150

Related knowledge

HTMLは初心者のために簡単に学ぶことができますか？ Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

HTML、CSS、およびJavaScriptの役割：コアの責任 Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTMLでの開始タグの例は何ですか？ Apr 06, 2025 am 12:04 AM

Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。