SCSS構文の詳細

43005 ワード
mixin If_Else debug テキストリンク

MIXIN


今回はMIXINを学びましょうMIXINは関数の形状や機能に似ています.また、IF/ELSEのような条件文を加えてもよい.htmlを作っておきましょう奇数の2番目のgoogleは青の偶数の2番目のgoogleで赤に設定します.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="dist/css/reset.css" />
    <link rel="stylesheet" href="dist/css/styles.css" />
    <title>(S)CSS Masterclass</title>
  </head>
  <body>
    <a href="#">Google</a>
    <a href="#">Google</a>
    <a href="#">Google</a>
    <a href="#">Google</a>
    <a href="#">Google</a>
    <!-- google 이라는 링크를 5개 만들고 싶다고 하면 a*5{google} 이라고 하면 됨 -->
  </body>
</html>
minxinsもあります.scssという名前のファイルを作成します.(インポートするファイルはstyles.scssと同じフォルダにある必要があります.)
mixinを定義する場合は、@記号を使用して関数名を設定します.見ればわかりますが、人子も通れます.
@mixin link($color) {
  text-decoration: none;
  display: block;
  color: $color;
}

@mixin awesome($word) {
  text-decoration: none;
  display: block;
  @if $word == "odd" {
    color: blue;
  } @else {
    color: red;
  }
} //엄청나지 않나?? 파이썬 함수 만들때 처럼 인자설정은 물론, if/else 문까지 쓸수 있다.
それからminxinsを入力して、scssコードを書けばいいです.includeを使用して関数を呼び出します.
@import "_minxins";

a {
  margin-bottom: 10px;
  &:nth-child(odd) {
    @include awesome("odd");
  }
  &:nth-child(even) {
    @include awesome("even");
  }
} //파이썬 처럼 minxins 안에 있는 함수를 적용하였다. 이때 include 를 사용한다.
さて、次のように、こつこつと出てきました.

EXTEND


mixinはcssを柔軟に変換し,extendはその名の通り,移行後に使用する用途である.htmlを作成しておきましょうloginリンクとlogoutボタンのスタイルを同じにしたいです.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="dist/css/reset.css" />
    <link rel="stylesheet" href="dist/css/styles.css" />
    <title>(S)CSS Masterclass</title>
  </head>
  <body>
    <a href="#">log In</a>
    <button>Log Out</button>
  
  </body>
</html>
そしてbuttonscssという名前のファイルを作成します.extendを作成するときに%記号を使用します.つまり、これで下のようなバッグを一度に作ることができます.
%button {
    font-family: Georgia, 'Times New Roman', Times, serif;
    border-radius: 7px;
    text-decoration: none;
    text-transform: uppercase;    
    background-color: powderblue;
    color:white;
    font-weight: 500;
    padding: 5px 10px;
}

// extend를 쓰고 싶을때는 퍼센테이지 바로 옆에 함수의 이름이 있어야 한다.
importもあるでしょう.extendを読み込み、次のcssプロパティを追加できます.
@import "_buttons";

a{
  @extend %button;
  text-decoration: none;
}

button {
  @extend %button;
  border: none;
}

// extend 함수는 minxins 과는 다르게 똑같은 함수를 가볍게 적용할 수 있다.
// minxins은 인자와 조건에 따라 유연하게 바뀌는 측면에서, 그리고 독립적으로 적용할 수 있다는 점에서 extend와 차이가 있다.

結果



function

@function grid($a: 1, $b: 2) {
  @return $a + $b;
}

//사용할때는 js랑 똑같다
.box {
  width: grid(1, 2);
}
名前がbuild-in関数と重なる場合は、my-gridを使用することが望ましい.

条件

// 조건문
@mixin avatar($size, $circle: false) {
  width: $size;
  height: $size;

  @if $circle {
    border-radius: $size/2;
  }
}

// 삼항연산자
if(조건,true,false) .square-av {
  @include avatar(100px, $circle: false);
}

// 반복문
// each
@use "sass:list";

$size: 20px 40px 80px;
$fruits: (
  apple: 1,
  banana: 2,
);

@each $size in $sizes {
  $index: list.index($sizes, $size);
  .icon-#{$index} {
    height: $size;
    width: $size;
  }
}

//for
.list {
  position: relative;
  top: 0;
  @for $i from 1 through 3 {
    .item {
      width: 100px * $i;
    }
  }
}

//while
.list {
  position: relative;
  .item {
    $i: 1;
    $n: 8;
    @while $n > 0 {
      &:nth-child(#{$i}) {
        width: 100px * $n;
        height: 100px * $i;
      }

      $i: $i + 1;
      $n: $n - 2;
    }
  }
}
作成した変数は、ブートによって使用できます.

&(ご自身を参照)


&


自分を参照する.
.container {
  &-a {...}
  &-b {...}
  &-c {...}
}
cssで次のように表す
.container-a {
 ...
}

.container-b {
 ...
}

.container-c {
 ...
}

ほじょきのう


選択者の属性または置換文字を処理する機能.#{}記号を使用します.

例1。

@mixin box($position, $width, $color) {
    border-#{$position}: $width solid $color;
}

div{
    @include box(left, 2px, blue);
}
p{
    @include box(bottom, 1px, red);
}
そして次のようにコンパイルします.
div {
  border-left: 2px solid blue;
}

p {
  border-bottom: 1px solid red;
}

例2。

.list li.icon1 {
  background-image: url(img/icon1.svg);
}

.list li.icon2 {
  background-image: url(img/icon2.svg);
}

.list li.icon3 {
  background-image: url(img/icon3.svg);
}

.list li.icon4 {
  background-image: url(img/icon4.svg);
}


@for $i from 1 through 4 {
    .list li.icon#{$i} {
        background-image: url(img/icon#{$i}.svg);
    }
}

import

  • モジュール化:@use './variables'as var使用時、var.$successと呼ぶことができる.
    • この方式を「モジュール化」と呼ぶ.
    @use "./variables" as var var.$success;
  • forward:他のファイルで使用できるキーワード
    • // 이름 충돌 발생하지 않게 하는 과정. var-여기는 variables 안에있는 어떤 변수가 와도 상관없음.
// a.scss
@foward './variables' as var-*

// b.scss
// 요렇게 사용가능
@use /../a
width: a.$var-cool;

    内蔵モジュール/関数

  • dark($color,$amount):amountまで色が暗くなります.
  • background-color: color.adjust($primary,$ligtness:-20%):$primary色輝度が20%程度低下
  • 飽和(color,amount):colorをamountに調整します.x)飽和(brown,50%)}褐色飽和度は50%上昇した.//「脱飽和」という内蔵モジュールもあります.
  • listモジュール
    • @use 'sass:list';

// append, index, join, length, nth 를 사용가능
$nations: KOREA,JAPAN,CHINA
$planet: EARTH, MOON, MARSE
$nations: list.append($nations,USA) // $nations: KOREA,JAPAN,CHINA,USA
$nations: list.index($nations,KOREA) // $nations: 0
$universe: list.join($nations,$planet) // $universe:KOREA, JAPAN, CHINA,EARTH, MOON, MARSE
list.length($universe) // 6
list.nth($universe,1) // JAPAN

    mapモジュール

    @use "sass:map";
@use "sass:stirng" $my-info:
  (name: "YEONGHUN", address: "ULSAN" . age: 30, weight: 60) $another-info:
  (name: "HOHI", job: "teacher") map.get($my-info, name) // 'YEONGHUN'
  map.get($my-info, hello) // null
  // 따옴표가 없어짐
  string.unquote(map.get($my-info, name)) // YEONGHUN
  map.has-key($my-info, weight) // true
  map.keys($my-info) // name, address, age, weight
  map.values($my-info) // 'YEONGHUN' , 'ULSAN', 30, 60
  $new-info: map.merge($my-info, $another-info) /* $new-info: (
 name:'HOHI',
 address: 'ULSAN'.
 age: 30,
 weight: 60,
 job: 'teacher'
)
*/ $new-info: map.remove($new-info, job) // remove는 덮어쓸때만 사용 가능
  * * 참고로 key에 따옴표 적을 수 있음.;

  • mathモジュールもあります.別に探してみます.

  • meta
    • @use 'sass:meta'

// $cb 함수안에 200px 을 인자로 pass하게 됨
@function a($cb) {
 $res: meta.call($cb,200px)
 @return $res
}

@function c($s) {
 @return $s + 100px;
}

div {
  height: a(c)
}

meta.type-of(a) // function
  • stringモジュール.

    • debug

    @debug "heelo";
@warn 'be careful!';

// 에러메세지를 넣으면 컴파일이 이루어지지 않고 에러가 뜸
@error 'something missing';
    デバッグはコンソールです.logに類似
    warnはコンソールです.warnに似ている
    errorはthrow new errorに似ています
    【初心者】Rails6 でプロジェクトを立ち上げるまでとつまづいたところ
    ある数のn次方のアルゴリズムを求めます(効率的です)