検索

@if
  @if 指令是一个SassScript,它可以根据条件处理样式块,如果条件为true返回一个样式块,反之
  false 返回另一个样式块,在Sass 中除了@if之,还可以配合@else if和eles 一起。
  例如:
    //SCSS
      @mixin blockOrHidden($boolean:true){
            @if $boolean {
              @debug "$boolean is #{$boolean}";
              display:block;
              }
              @else{
                @debug "$boolean is #{$boolean}";
                  display:none;
                }
              }
            .block{
              @include blockOrHidden;
            }
      .hidden{
          @include blockOrHidden(false);
      }
    编译出来的css
    .block{
      display:block;
    }
    .hidden{
      display:none;
    }
@for循环(上)
    在Sass 的@for 循环中油两种方式:
    @for $i from through
    @for $i from to
    $i 表示变量
    start 表示起始值
    end 表示结束值
    这两个的区别是一个关键字,through 表示包括end 这个数,而to 则不包括end 这个数。
    如下代码,先来一个使用through 关键字。
    @for $i from 1 throug 3 {
      .item-#{$i} {
          width:2em *$i;
        }
     }
    编译出来css
    .item-1{
        width:2em;
      }
    .item-2{
      width:4em;
    }
    .item-3{
        width:6em;
    }
    在来一个to关键字的例子:
    @for $i from to 3 {
      .item-#{$i} { width:2em * $i;}
     }
    编译出来的css:
    .item-1{
      width:2em;
    }
    .item-2{
      width:4em;
    }
@for循环(下)
    @for 应用在网格系统生成各个格子class 的代码。
    //scss
      $grid-prefix: span !default;
      $grid-width:60px !defaulet;
      $grid-gutter:20px !defaulet;

    %grid{
        float:left;
        margin-left:$grid-gutter / 2;
        margin-right:$grid-gutter / 2;
      }
    @for $i from 1 through 12 {
    .#{$grid-prefix} #{$i}{
        width:$grid-width *$grid-gutter *($i - 1);
        @extend %grid;
      }
    }
    编译出来的css
     .span1, .span2, .span3, .span4, .span5
      , .span6, .span7, .span8, .span9, .span10,
      , .span11,, .span12{
              float:left;
              margin-left:10px;
              margin-right:10px;
       }
      .span1{
          width:60px;
      }
      .span2{
          width:140px;
      }
      .span3{
          width:220px;
      }
      .span4{
          width:300px;
       }
      .span5{
          width:380px;
      }
      .span6{
          width:400px;
      }
      .span7{
          width:540px;
      }
      .span8{
          width:620px;
      }
      .span9{
          width:700px;
      }
      .span11 {
        width: 860px;
      }

      .span12 {
        width: 940px;
      }
    将上面的示例稍做修改,将 @for through 方式换成 @for to::
      //scss
      @for $i from 1 to 13{
.        #{$grid-prefix}#{$i}{
          width:$grid-width * $i + $grid-grutter *($i -1);
          @extend %grid;
          }
      }
    这两段 Sass 代码并无太多差别,只是 @for中的 取值不同。配合 through 的 值是 12,
    其遍历出来的终点值也是 12,和 值一样。配合 to 的 值是 13,其遍历出来的终点值是 12,
    就是 对就的值减去 1
@while 循环
    @while指令也需要SassScript 表达式(像其他指令一样),并且会生成不同的样式块,直到表达式值为false
    时停止循环。这个和@for 指令很相似,只要@while 后面的条件为true就会执行。
    例如:
      //SCSS
      $types:4;
      $type-width:20px;
      @while $types > 0{
          .while-#{$types}
          width:$type-width + $types;
        }
      $types: $types - 1;
      编译出来css
      .while-4{
          width:24px;
        }
      .while-3{
          width:23px;
        }
      .while-2{
          width:22px;
        }
      .while-1{
        width:21px;
      }
@each循环
  @each循环就是去遍历一个列表,依然从列表中取出对应的值。
  @each 循环指令的形式:
  @each $var in
  例如:
    @mixin author-images{
      @each $author in $list {
        .photo-#{$author}{
          background:url("/images/avatars/#{$author}.png") no-repeat;
          }
      }
    }
  .anthor-bio{
      @include author-images;
  }
  编译出来 CSS
  .author-bio .photo-adam{
    background:url("/images/avatars/adam.png") no - repeat;
  }
  .author-bio .photo-john{
    background:url("/images/avatars/john.png") no - repeat;
  }
  .author-bio .photo-wynn{
      background:url("/images/avatars/wynn.png") no - repeat;
  }
  .author-bio .photo-mason{
        background:url("/images/avatars/mason.png") no - repeat;
  }
  .author-bio .photo-kuroir{
    background:url("/images/avatars/wynn.png") no - repeat;
  }
    Sass的函数简介
    函数主要包括。
    字符串函数
    数字函数
    列表函数
    颜色函数
    Interospection函数
    三元函数等。
    字符串函数-unquote() 函数
    字符串函数顾名思义是用来处理字符串的函数,Sass 的字符串函数要包括两种。
    unquote($string): 删除字符串中的引号
    quote($string):给字符串添加引号。
1.unquote()函数。
    unquote() 函数主要是用来删除字符串的引号。如果这个字符串没有带引号,将返回原始的字符串
    //SCSS
      .test1{
        content: unquote('Hello Sass!');
      }
    .test2{
        content:unquote(" 'Hello Sass!");
      }
    .test3{
        content:unquote("I' m Web Designer");
    }
    .test4{
        content:unquote(" 'Hello Sass!' ");
    }
    .test5{
        content:unquote('" Hello Sass!"');
    }
    .test6{
      content:unquote(Hello Sass);
    }
    编译后的 css代码
     // css
    .test1{
      content:Hello Sass!; }
    .test2{
      content:'Hello Sass!; }
    .test3{
      content:I'm Web Designer; }
    .test4{
      content:'Hello Sass!'; }
    .test5{
      content:"Hello Sass!"; }
    .test6{
      content:Hello Sass!; }
    unquote( ) 函数只能删除字符串最前和最后的引号(双引号或单引号),而无法删除字符串中间的引号。
    如果字符没有带引号,返回的将是字符串本身。
    字符串函数-quote()函数
      quote()函数刚好与unquote() 函数功能相反,主要用来给字符串添加引号。如果字符串,自身带有引号
    会统一换成双引号。
    // SCSS
    .test1{
        content: quote( 'Hello Sass!' );
      }
    .test2{
        content: quote("Hello Sass!")
    }
    .test3{
      content: quote(ImWebDesigner);
    }
    .test4{
      content: quote(' ');
    }
    编译出来的css 代码
    // css
    .test1{
        content: "Hello Sass!";
    }
    .test2{
        content: "Hello Sass!"
    }
    .test3{
      content: "ImWebDesigner";
    }
    .test4{
      content: "";
    }
    使用 quote() 函数只能给字符串增加双引号,而且字符串中间有单引号或者空格时,
    需要用单引号或双引号括起,否则编译的时候将会报错。
    字符串函数-To-upper-case(),To-lower-case()
    1.To-upper-case(),To-lower-case()
      To-upper-case()
     //SCSS
    .test {
        text:to-upper-case(aaaaa);
        text:to-upper-case(aA-aAAA-aaa);
    }
  编译出来的css 代码
    // CSS
    .test{
      text:AAAAA;
      text:AA-AAAA-AAA;
    }
2.To-lower-case()
  To-lower-case() 函数 与To-upper-case()刚好相反,将字符串转成小写字母。
  // SCSS
  .test{
      text: to-lower - cass(AAAAA);
      text: to-lower-case(aA-aAAA-aaa)
  }
  编译出来的 css 代码;
    //css
    .test{
      text: aaaaa;
      text:aa-aaaa-aaa;
    }
    数字函数简介
    Sass 中的数组函数要针对数字方面提供一系列的函数功能:
    percentage($value):将一个不带单位的数转换成百分比:
    round($value):将数值四舍五入,转换成一个最接近的整数;
    ceil($value):将大于自己的小数转换成下一位整数;
    floor($value):将一个数去除他的小数部分;
    abs($value):返回一个数的绝对值。
    min($numbers...) 找出几个数之间的最小值:
    max($numbers...)找出几个数值之间的最大值
    random() 获取随机数。
    数字函数-percentage()
1.percentage()
    percentage() 函数主要是将一个不带单位的数字转成 百分比形式:
    >> percentage(.2)
    20%
    >>percentage(2px / 10px)
    20%
    >>percentage(2em / 10em)
    20%
    >>
    .footer{
        width:percentage(.2)
    }
    编译后的css 代码;
    .footer{
      width:20%;
    }
数字函数-round() 函数
    round()函数可以将一个数四舍五入为一个最近的整数;
    >>round(12.3)
      12
    >> round(12.5)
      13
    >>round(1.499999)
      1
    >>round(20%)
      20%
    >>round(3.9em)
      4em
    >>round(2.3px)
      2px
    >>round(1px /3px)
      0
    >>round(3px / 2em)
      2px/em

      .footer{
          width:round(12.3px)
      }
    编译出来的css
    .footer{
        width:12px;
      }
数字函数-ceil()函数
    ceil()函数将一个数转换成最接近自己的整数,会讲一个大约自身的任何小数转换成大约本身1的整数,也就是只做入,不做舍的
    >> ceil(2.0)
      2
    >>ceil(2.1)
      3
    >>ceil(2.6)
      3
    >>ceil(2.3%)
      3%
    >>ceil(2.5px)
      3px
    >>ceil(2px / 3px)
      1
    >>ceil(2% / 3px)
      1%/px
    >>ceil(1em / 5px)
      1em/px

    .footer{
      width:ceil(12.3px);
    }
    编译后的css 代码:
  .footer{
      width:13px;
  }
  数字函数-floor()函数
    floor()函数刚好与ceil()函数功能相反,其主要将一个数去除其小数部分。并且不做任何的进位,也就是只做舍,不做入的计算。
  >> floor(2.1)
    2
  >> floor(2.5)
    2
  >>floor(3.5%)
    3%
  >>floor(10.2px)
    10em
  >> floor(10.2px)
    10px
  >>floor(10.8em)
    10em
  >>floor(2px / 10px)
    0
  >> floor(3px / 1em)
    3px /em
  .footer{
    width:floor(12.3px);
  }
  编译后的css代码
  .footer{
    width:12px;
  }

数字函数-abs() 函数
  abs()函数会返回一个数的绝对值。
  >>abs(10)
    10
  >>abs(-10)
    10
  >>abs(-10px)
    10px
  >>abs(-2em)
    2em
  >>abs(-.5%)
    0.5%
  >>abs(-1px / 2px)
    0.5
  .footer{
    width:abs(-12.3px)
  }
  编译后的css代码:
    .footer{
      width:12px;
    }
数字函数-min()函数,max()函数
  min() 函数功能主要是在多个数之中找到最小的一个,这个函数可以设置任意多个参数。
  >>min(1,2,1%,3.300%)
    1%
  >> min(1px,2,3px)
    1px
  >>min(1em,2em,6em)
    1em
  不过在min() 函数中同时出现两种不同类型的单位,将会报错误信息。
    >>min(1px, 1em)
      SyntaxError: Incompatible units:'em' and'px'.
max()函数
  max()函数和min函数一样,不同的是,max() 函数用来获取一系列书数中的最大那个值。
    >> max(1,5)
      5
    >>max(1px,5px)
      5px
    同样的,如果在max()函数中有不同的单位,将会报错:
    >> max(1,3px,5%,6)
      SyntaxError: Incompatible units: '%' and ‘px'.
    数字函数-random()函数
    random()函数是用来获取一个随机数。
    >> random()
      0.03886
    >>random()
      0.66527
    >> random()
      0.8125
    >>random()
      0.26839
    >>random()
    0.85065
列表函数介绍
      列表函数主要包括一些对列表参数的函数使用,主要包括以下几种形式。
      length($list):返回一个列表的长度值:
      nth($list,$n):返回一个列表中指定的某个标签值。
      join($list1,$list2,[$separator] ):将某个值放在列表的最后;
      zip($lists...);将几个列表结合成一个多维的列表:
      index($list,$value)返回一个值在列表中的位置值。
length()函数
  length()函数主要用来返回一个列表的中有几个值,简单点说就是返回列表清单中有多少个值:
  >>length(10px)
    1
  >>length(10px 20px (border 1px solid) 2em)
    4
  >>length(border 1px solid)
    3
  length() 函数中的列表参数之间使用空格隔开,不能使用逗号,否则函数将会出错;
  >> length(10px, 20px,(border 1px solid),2em)
    SyntaxError: wrong number of arguments(4 for 1) for'length
    nth($list,$n)
    nth()函数用来指定列表中某个位置的值,不过在Sass 中,nth()函数和其他语法不同,1 是指列表中的第一个标签值
    2 是指列表中的第二个标签值。
      >> nth(10px 20px 30px,1)
        10px
      >>nth((Helvetica,Arial,sans-serif),2)
        "Arial"
      >>nth((1px solid red) border-top green,1)
        (1px "solid" #ff0000)
      在nth($list,$n) 函数中的$n 必须是大于 0 的整数;

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
HTML対CSSおよびJavaScript:Webテクノロジーの比較HTML対CSSおよびJavaScript:Webテクノロジーの比較Apr 23, 2025 am 12:05 AM

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

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

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

HTML、CSS、およびJavaScriptの未来:Web開発動向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:動作HTML:構造、CSS:スタイル、JavaScript:動作Apr 18, 2025 am 12:09 AM

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

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

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

HTML対CSS対JavaScript:比較概要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ページの動作を制御します。

HTML:それはプログラミング言語か何か他のものですか?HTML:それはプログラミング言語か何か他のものですか?Apr 15, 2025 am 12:13 AM

htmlisnotaprogramminglanguage; itisamarkuplanguage.1)htmlStructuresandformatswebcontentusingtags.2)ItworkswithcsssssssssdjavascriptforInteractivity、強化を促進します。

HTML:Webページの構造の構築HTML:Webページの構造の構築Apr 14, 2025 am 12:14 AM

HTMLは、Webページ構造の構築の基礎です。 1。HTMLは、コンテンツ構造とセマンティクス、および使用などを定義します。タグ。 2. SEO効果を改善するために、などのセマンティックマーカーを提供します。 3.タグを介したユーザーの相互作用を実現するには、フォーム検証に注意してください。 4. JavaScriptと組み合わせて、動的効果を実現するなどの高度な要素を使用します。 5.一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれ、検証ツールが必要です。 6.最適化戦略には、HTTP要求の削減、HTMLの圧縮、セマンティックタグの使用などが含まれます。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

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

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

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

DVWA

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

MantisBT

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

SublimeText3 中国語版

SublimeText3 中国語版

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

mPDF

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。