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

ホームページ

ウェブフロントエンド

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

HTMLのブール属性とは何ですか？いくつかの例を挙げてください。Apr 25, 2025 am 12:01 AM

ブール属性は、値なしでアクティブ化されるHTMLの特別な属性です。 1.ブール属性は、無効化された入力ボックスを無効にするなど、存在するかどうかによって、要素の動作を制御します。 2.彼らの実用的な原則は、ブラウザが異なっているときに属性の存在に応じて要素の動作を変更することです。 3.基本的な使用法は、属性を直接追加することであり、高度な使用法はJavaScriptを介して動的に制御できます。 4.一般的な間違いは、値を設定する必要があると誤って考えており、正しい執筆方法は簡潔にする必要があります。 5.ベストプラクティスは、コードを簡潔に保ち、ブールのプロパティを合理的に使用して、Webページのパフォーマンスとユーザーエクスペリエンスを最適化することです。

HTMLコードをどのように検証できますか？Apr 24, 2025 am 12:04 AM

HTMLコードは、オンラインバリデーター、統合ツール、自動化されたプロセスを使用するとクリーンになります。 1）w3cmarkupvalidationserviceを使用して、HTMLコードをオンラインで確認します。 2）リアルタイム検証のためにVisualStudiocodeにhtmlhint拡張機能をインストールして構成します。 3）HTMLTIDYを使用して、建設プロセスでHTMLファイルを自動的に検証およびクリーニングします。

HTML対CSSおよびJavaScript：Webテクノロジーの比較Apr 23, 2025 am 12:05 AM

HTML、CSS、およびJavaScriptは、最新のWebページを構築するためのコアテクノロジーです。1。HTMLはWebページ構造を定義します。2。CSSはWebページの外観に責任があります。

マークアップ言語としてのHTML：その機能と目的Apr 22, 2025 am 12:02 AM

HTMLの機能は、Webページの構造とコンテンツを定義することであり、その目的は、情報を表示するための標準化された方法を提供することです。 1）HTMLは、タイトルやパラグラフなどのタグや属性を使用して、Webページのさまざまな部分を整理しています。 2）コンテンツとパフォーマンスの分離をサポートし、メンテナンス効率を向上させます。 3）HTMLは拡張可能であり、カスタムタグがSEOを強化できるようにします。

HTML、CSS、およびJavaScriptの未来：Web開発動向Apr 19, 2025 am 12:02 AM

HTMLの将来の傾向はセマンティクスとWebコンポーネントであり、CSSの将来の傾向はCSS-in-JSとCSShoudiniであり、JavaScriptの将来の傾向はWebAssemblyとServerLessです。 1。HTMLセマンティクスはアクセシビリティとSEO効果を改善し、Webコンポーネントは開発効率を向上させますが、ブラウザの互換性に注意を払う必要があります。 2。CSS-in-JSは、スタイル管理の柔軟性を高めますが、ファイルサイズを増やす可能性があります。 CSShoudiniは、CSSレンダリングの直接操作を可能にします。 3. Webassemblyブラウザーアプリケーションのパフォーマンスを最適化しますが、急な学習曲線があり、サーバーレスは開発を簡素化しますが、コールドスタートの問題の最適化が必要です。

HTML：構造、CSS：スタイル、JavaScript：動作Apr 18, 2025 am 12:09 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。

HTMLの未来：ウェブデザインの進化とトレンドApr 17, 2025 am 12:12 AM

HTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

HTML対CSS対JavaScript：比較概要Apr 16, 2025 am 12:04 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。

See all articles