부트스트랩 Sass를 사용하는 방법-부트스트랩 튜토리얼-php.cn

부트스트랩 Sass를 사용하는 방법

藏色散人

풀어 주다： 2023-02-08 11:46:31

원래의

2167명이 탐색했습니다.

이 문서의 운영 환경: Windows 7 시스템, bootstrap3, Dell G3 컴퓨터.

Installation

Sass는 Ruby로 작성되었으므로 Sass를 사용하려면 먼저 Ruby를 다운로드해야 합니다. Ruby는 Sass 실행만 지원합니다. Ruby를 이해하지 못해도 상관없습니다.

Ruby를 설치한 후 Sass 공식 웹사이트에서 다운로드하여 사용할 수 있습니다

Sass 사용법

1. 변수

Sass는 달러 기호를 통해 변수를 사용합니다

//Sass源码
$highlight-color: #000000;
.selected {
  border: 1px solid $highlight-color;
}
//编译后的CSS
.selected {
  border: 1px solid #000000; 
}

로그인 후 복사

2. Sass의 중첩은 Less와 동일하며 Just inside

3에 직접 작성됩니다. 코드 재사용

@mixin @include @extend @function @import

Sass는 @mixin을 사용할 수 있습니다. 코드 블록을 정의한 다음 @include를 사용합니다. @mixin을 재사용하려면 매개변수도 지원합니다

//Sass源码
@mixin border-radius($radius){
  -moz-border-radius:$radius;
  -webkit-border-radius:$radius;
  border-radius:$radius;
}

button{
  @include border-radius(5px);
}
//编译后的CSS
button {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px; 
}

로그인 후 복사

Sass는 @extend를 사용하여 클래스를 상속할 수 있습니다

//Sass源码
.block{
  padding: 15px;
  margin-bottom: 15px;
}

.block-primary{
  @extend .block;
  color: #00aff0;
}
//编译后的CSS
.block, .block-primary {
  padding: 15px;
  margin-bottom: 15px; 
}

.block-primary {
  color: #00aff0; 
}

로그인 후 복사

@mixin 来定义代码块然后用@include 来复用 @mixin同样也支持参数

//Sass源码
@mixin add-background($color){
  background: $color;
  @if $color==#000000{
    color: #666666;
  }@else {
    color: #ffffff;
  }
}

.section-primary{
   @include add-background(#ffffff);
}
//编译后的CSS
.section-primary {
  background: #ffffff;
  color: #ffffff; 
}

로그인 후 복사

Sass可以使用@extend 来继承一个类

rrreee

Sass 还可以使用@import来导入外部文件可以使用@functionSass는 다음을 사용할 수도 있습니다. 외부 파일을 가져오려면 @import 예 함수를 정의하려면 @function을 사용하세요

4. Sass는 분기 및 반복을 지원합니다. @if @else if @else @for @while

rrreee

위 내용은 부트스트랩 Sass를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!