首頁 web前端 html教學 Sass插值、注释、数剧类型、字符串、值类型_html/css_WEB-ITnose

Sass插值、注释、数剧类型、字符串、值类型_html/css_WEB-ITnose

Jun 24, 2016 am 11:33 AM

插值#{}
使用 CSS 预处理器语言的一个主要原因是想使用 Sass 获得一个更好的结构体系。比如说你想写更干净的、高效的和面向对象的 CSS。Sass 中的插值(Interpolation)就是重要的一部分。例子:

1 $properties: (margin, padding);2  @mixin set-value($side, $value) {3         @each $prop in $properties {4  #{$prop}-#{$side}: $value;5  }6 }7 .login-box {8  @include set-value(top, 14px);9 }
登入後複製

它可以让变量和属性工作的很完美,上面的代码编译成 CSS:

1 .login-box {2  margin-top: 14px;3  padding-top: 14px;4 }
登入後複製

当你想设置属性值的时候你可以使用字符串插入进来。另一个有用的用法是构建一个选择器。可以这样使用:

1 @mixin generate-sizes($class, $small, $medium, $big) {2  .#{$class}-small { font-size: $small; }3  .#{$class}-medium { font-size: $medium; }4  .#{$class}-big { font-size: $big; }5 }6 @include generate-sizes("header-text", 12px, 20px, 40px);
登入後複製

编译出来的 CSS:

1 .header-text-small { font-size: 12px; }2 .header-text-medium { font-size: 20px; }3 .header-text-big { font-size: 40px; }
登入後複製

#{}语法并不是随处可用,不能在 mixin 中调用
可以使用 @extend 中使用插值。

 1 %updated-status { 2  margin-top: 20px; 3  background: #F00; 4 } 5 .selected-status { 6  font-weight: bold; 7 } 8 $flag: "status"; 9 .navigation {10  @extend %updated-#{$flag};11  @extend .selected-#{$flag};12 }
登入後複製

上面的 Sass 代码是可以运行的,可以动态的插入 .class 和 %placeholder。他们不能接受像 mixin 这样的参数,上面的代码编译出来的 CSS:

1 .navigation {2  margin-top: 20px;3  background: #F00;4 }5 .selected-status, .navigation {6  font-weight: bold;7 }
登入後複製

注释
在 Sass 中注释有两种方式:
1、类似 CSS 的注释方式,使用 ”/* ”开头,结属使用 ”*/
2、类似 JavaScript 的注释方式,使用“//
两者区别,前者会在编译出来的 CSS 显示,后者在编译出来的 CSS 中不会显示

数据类型

SassScript 支持六种主要的数据类型:

  • 数字(例如 1.2、13、10px)
  • 文本字符串,无论是否有引号(例如 "foo"、'bar'、baz)
  • 颜色(例如 blue、#04a3f9、rgba(255, 0, 0, 0.5))
  • 布尔值(例如 true、false)
  • 空值(例如 null)
  • 值列表,用空格或逗号分隔(例如 1.5em 1em 0 2em、Helvetica, Arial, sans-serif)
  • SassScript 还支持所有其他 CSS 属性值类型, 例如 Unicode 范围和 !important 声明。 然而,它不会对这些类型做特殊处理。 它们只会被当做不带引号的字符串看待。

    字符串

    CSS 提供了两种类型的字符串:

    带引号的字符串,例如 "Lucida Grande"'http://sass-lang.com'; 不带引号的字符串,例如 sans-serifbold

    在编译 CSS 文件时不会改变其类型。只有一种情况例外,使用 #{ }插值语句 (interpolation) 时,有引号字符串将被编译为无引号字符串,这样方便了在混合指令 (mixin) 中引用选择器名。

    1 @mixin firefox-message($selector) {2  body.firefox #{$selector}:before {3  content: "Hi, Firefox users!";4     }5 }6 @include firefox-message(".header");
    登入後複製

    编译为:

    1 body.firefox .header:before {2  content: "Hi, Firefox users!"; 3 }
    登入後複製

     

     

     

    值列表
    所谓值列表 (lists) 是指 Sass 如何处理 CSS 中: margin: 10px 15px 0 0 或者:font-face: Helvetica, Arial, sans-serif 
    像上面这样通过空格或者逗号分隔的一系列的值。

    事实上,独立的值也被视为值列表——只包含一个值的值列表。

    Sass列表函数(Sass list functions)赋予了值列表更多功能:

    1. nth函数(nth function) 可以直接访问值列表中的某一项;
    2. join函数(join function) 可以将多个值列表连结在一起;
    3. append函数(append function) 可以在值列表中添加值; 
    4. @each规则(@each rule) 则能够给值列表中的每个项目添加样式。

    值列表中可以再包含值列表,比如 1px 2px, 5px 6px 是包含 1px 2px 与 5px 6px 两个值列表的值列表。如果内外两层值列表使用相同的分隔方式,要用圆括号包裹内层,所以也可以写成 (1px 2px) (5px 6px)。当值列表被编译为 CSS 时,Sass 不会添加任何圆括号,因为 CSS 不允许这样做。(1px 2px) (5px 6px)与 1px 2px 5px 6px 在编译后的 CSS 文件中是一样的,但是它们在 Sass 文件中却有不同的意义,前者是包含两个值列表的值列表,而后者是包含四个值的值列表。
    可以用 () 表示空的列表,这样不可以直接编译成 CSS,比如编译 font-family: ()时,Sass 将会报错。如果值列表中包含空的值列表或空值,编译时将清除空值,比如 1px 2px () 3px 或 1px 2px null 3px。

     

    本網站聲明
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

    熱AI工具

    Undresser.AI Undress

    Undresser.AI Undress

    人工智慧驅動的應用程序,用於創建逼真的裸體照片

    AI Clothes Remover

    AI Clothes Remover

    用於從照片中去除衣服的線上人工智慧工具。

    Undress AI Tool

    Undress AI Tool

    免費脫衣圖片

    Clothoff.io

    Clothoff.io

    AI脫衣器

    Video Face Swap

    Video Face Swap

    使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

    熱門文章

    <🎜>:泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
    3 週前 By 尊渡假赌尊渡假赌尊渡假赌
    北端:融合系統,解釋
    3 週前 By 尊渡假赌尊渡假赌尊渡假赌
    Mandragora:巫婆樹的耳語 - 如何解鎖抓鉤
    3 週前 By 尊渡假赌尊渡假赌尊渡假赌

    熱工具

    記事本++7.3.1

    記事本++7.3.1

    好用且免費的程式碼編輯器

    SublimeText3漢化版

    SublimeText3漢化版

    中文版,非常好用

    禪工作室 13.0.1

    禪工作室 13.0.1

    強大的PHP整合開發環境

    Dreamweaver CS6

    Dreamweaver CS6

    視覺化網頁開發工具

    SublimeText3 Mac版

    SublimeText3 Mac版

    神級程式碼編輯軟體(SublimeText3)

    熱門話題

    Java教學
    1665
    14
    CakePHP 教程
    1424
    52
    Laravel 教程
    1321
    25
    PHP教程
    1269
    29
    C# 教程
    1249
    24
    了解HTML,CSS和JavaScript:初學者指南 了解HTML,CSS和JavaScript:初學者指南 Apr 12, 2025 am 12:02 AM

    WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

    HTML:結構,CSS:樣式,JavaScript:行為 HTML:結構,CSS:樣式,JavaScript:行為 Apr 18, 2025 am 12:09 AM

    HTML、CSS和JavaScript在Web開發中的作用分別是:1.HTML定義網頁結構,2.CSS控製網頁樣式,3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

    HTML,CSS和JavaScript的未來:網絡開發趨勢 HTML,CSS和JavaScript的未來:網絡開發趨勢 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優化瀏覽器應用性能但學習曲線陡,Serverless簡化開發但需優化冷啟動問題。

    HTML的未來:網絡設計的發展和趨勢 HTML的未來:網絡設計的發展和趨勢 Apr 17, 2025 am 12:12 AM

    HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

    HTML與CSS vs. JavaScript:比較概述 HTML與CSS vs. JavaScript:比較概述 Apr 16, 2025 am 12:04 AM

    HTML、CSS和JavaScript在網頁開發中的角色分別是:HTML負責內容結構,CSS負責樣式,JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容,確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式,使其美觀易讀。 3.JavaScript通過腳本控製網頁行為,實現動態和交互功能。

    HTML:建立網頁的結構 HTML:建立網頁的結構 Apr 14, 2025 am 12:14 AM

    HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義,使用、、等標籤。 2.提供語義化標記,如、、等,提升SEO效果。 3.通過標籤實現用戶交互,需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號,需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。

    HTML與CSS和JavaScript:比較Web技術 HTML與CSS和JavaScript:比較Web技術 Apr 23, 2025 am 12:05 AM

    HTML、CSS和JavaScript是構建現代網頁的核心技術:1.HTML定義網頁結構,2.CSS負責網頁外觀,3.JavaScript提供網頁動態和交互性,它們共同作用,打造出用戶體驗良好的網站。

    HTML:是編程語言還是其他? HTML:是編程語言還是其他? Apr 15, 2025 am 12:13 AM

    HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1)htmlStructures andFormatSwebContentusingtags.2)itworkswithcsssforstylingandjavascript for Interactivity,增強WebevebDevelopment。

    See all articles