Résumé des apprentissages sur le SASS-tutoriel CSS-php.cn

Avant-propos

SASS est un préprocesseur CSS. Son idée de base est d'utiliser un langage de programmation spécialisé pour concevoir des styles de pages Web, puis de le compiler dans un fichier CSS normal.

SASS propose quatre options de style de compilation :

imbriqué : code CSS indenté imbriqué, qui est la valeur par défaut.
développé : code CSS étendu et non indenté.
compact : code CSS dans un format concis.
compressé : code CSS compressé.

Importer un fichier

Commande @import, utilisée pour importer des fichiers externes.

　@import "path/filename.scss";

Si le fichier .css est importé, il est équivalent à la commande css import.

Commentaires

Sass a deux méthodes de commentaires, l'une est la méthode de commentaire CSS standard /* */ et l'autre est //formulaire à double barre oblique Commentaires sur une seule ligne , mais ces commentaires sur une seule ligne ne seront pas traduits.

1 Variables

SASS permet l'utilisation de variables, toutes les variables commencent par $

Les variables ordinaires

peuvent être définies dans la portée globale Pour un usage interne.

Variable par défaut

La variable par défaut de sass doit seulement être ajoutée avec !default après la valeur.

Les variables par défaut de Sass sont généralement utilisées pour définir les valeurs par défaut, puis les remplacer en fonction des besoins. La méthode d'écrasement est également très simple. Il vous suffit de re-déclarer la variable avant la variable par défaut

La valeur des variables par défaut peut être très utile lors du développement de composants.

Variables spéciales

Généralement, les variables que nous définissons sont des valeurs d'attribut et peuvent être utilisées directement, mais si la variable est utilisée comme attribut ou dans certaines circonstances particulières, elle doit être # Formulaire {$variables} à utiliser.

Variables à valeurs multiples

Les variables à valeurs multiples sont divisées en type de liste et en type carte En termes simples, le type de liste est un peu comme le dans. js >Array, et le type de carte est un peu comme le objet dans js

variable globale

Ajoutez !global après le valeur de la variable pour devenir une variable globale. Ce n'est pas encore disponible, mais il sera officiellement utilisé dans les versions postérieures à Sass 3.4. La portée actuelle de la variable sass a été critiquée, cette variable globale est donc créée.

2 Imbrication

Il existe deux types d'imbrication dans sass : l'un est l'imbrication des sélecteurs ; l'autre est l'imbrication des attributs. Ce dont nous parlons ou utilisons habituellement, c'est l'imbrication des sélecteurs.

Dans l'imbrication du sélecteur, vous pouvez utiliser & pour représenter le parent Sélecteur d'élément

Imbrication d'attributs : ce qu'on appelle l'imbrication d'attributs signifie que certains attributs ont les mêmes mots de départ tels que border-width et border-color commencent tous par border.

.fakeshadow {
  border: {
    style: solid;
    left: {
      width: 4px;
      color: #888;
    }
    right: {
      width: 2px;
      color: #ccc;
    }
  }
}

Copier après la connexion

@at-root : Nouvelle fonction dans sass3.3.0, utilisée pour sortir de l'imbrication des sélecteurs.

3 Mixin

Utilisez @mixin dans sass pour déclarer un mix. Vous pouvez transmettre des paramètres. Le nom du paramètre commence par le symbole $. Vous pouvez également définir la valeur par défaut. valeurs pour les paramètres. Le @mixin déclaré appelle plusieurs paramètres via @

include

Lors de l'appel de mixin

, vous pouvez directement transmettre la valeur Par exemple, le nombre de paramètres transmis. par @include est inférieur à @ Le nombre de paramètres définis par le mixin est exprimé dans l'ordre. S'il n'y a pas de paramètres suffisants plus tard, la valeur par défaut sera utilisée. S'il n'y a pas de paramètres suffisants et qu'il n'y a pas de valeur par défaut, une erreur sera utilisée. signalé. De plus, vous pouvez également transmettre des paramètres de manière sélective, en utilisant les noms et les valeurs des paramètres à transmettre en même temps.

Mélange de paramètres à valeurs multiples

Si un paramètre peut avoir plusieurs ensembles de valeurs, tels que l'ombre de la boîte, la transition, etc., alors le paramètre doit être représenté en ajoutant trois points après le variable, telle que $variables ....

@content

@content在sass3.2.0中引入，可以用来解决css3的@media等带来的问题。它可以使@mixin接受一整块样式，接受的样式从@content开始。

 //sass style
//-------------------------------                     
@mixin max-screen($res){
  @media only screen and ( max-width: $res )
  {
    @content;
  }
}

@include max-screen(480px) {
  body { color: red }
}

//css style
//-------------------------------
@media only screen and (max-width: 480px) {
  body { color: red }
}

Copier après la connexion

** @mixin Le style analysé après l'appel de @include existe sous forme de copie, tandis que le hérité suivant existe sous forme de déclaration conjointe, donc à partir de la version 3.2. 0 et versions ultérieures, il est recommandé d'utiliser @mixin lors du passage des paramètres, au lieu d'utiliser le% d'héritage suivant lors du passage des classes de paramètres. **

4 Héritage

Dans Sass, l'héritage du sélecteur permet à un sélecteur d'hériter de tous les styles d'un autre sélecteur et de les déclarer conjointement. Pour utiliser l'héritage du sélecteur, utilisez le mot-clé @extend, suivi du sélecteur à hériter.

Sélecteur d'espace réservé%

从sass 3.2.0以后就可以定义占位选择器%。这种选择器的优势在于：如果不调用则不会有任何多余的css文件，避免了以前在一些基础的文件中预定义了很多基础的样式，然后实际应用中不管是否使用了 @extend 去继承相应的样式，都会解析出来所有的样式。占位选择器以%标识定义，通过 @extend 调用。

占位选择器的出现，使css文件更加简练可控，没有多余。所以可以用其定义一些基础的样式文件，然后根据需要调用产生相应的css。

//sass style
//-------------------------------
%ir{
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
%clearfix{
  @if $lte7 {
    *zoom: 1;
  }
  &:before,
  &:after {
    content: "";
    display: table;
    font: 0/0 a;
  }
  &:after {
    clear: both;
  }
}
#header{
  h1{
    @extend %ir;
    width:300px;
  }
}
.ir{
  @extend %ir;
}

//css style
//-------------------------------
#header h1,
.ir{
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
#header h1{
  width:300px;
}

Copier après la connexion

在 @media 中暂时不能 @extend @media外的代码片段，以后将会可以。

5 函数

sass定义了很多函数可供使用，当然你也可以自己定义函数，以 @fuction 开始。sass的官方函数链接为：sass fuction，实际项目中我们使用最多的应该是颜色函数，而颜色函数中又以lighten减淡和darken加深为最，其调用方法为lighten($color,$amount)和darken($color,$amount)，它们的第一个参数都是颜色值，第二个参数都是百分比。

// pixels to rems 
@function pxToRem($px) {
  @return $px / $baseFontSize * 1rem;
}

Copier après la connexion

6 运算

sass具有运算的特性，可以对数值型的Value(如：数字、颜色、变量等)进行加减乘除四则运算。请注意运算符前后请留一个空格，不然会出错。另外，要注意运算单位

7 条件判断及循环

@if判断

@if可一个条件单独使用，也可以和 @else 结合多条件使用

三目判断

if($condition, $if_true, $if_false)

for循环

for循环有两种形式，分别为：@for $var from

@each循环

语法为：@each $var in

多个字段list数据循环

//sass style
//-------------------------------
$animal-data: (puma, black, default),(sea-slug, blue, pointer),(egret, white, move);
@each $animal, $color, $cursor in $animal-data {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}

//css style
//-------------------------------
.puma-icon {
  background-image: url('/images/puma.png');
  border: 2px solid black;
  cursor: default; 
}
.sea-slug-icon {
  background-image: url('/images/sea-slug.png');
  border: 2px solid blue;
  cursor: pointer; 
}
.egret-icon {
  background-image: url('/images/egret.png');
  border: 2px solid white;
  cursor: move; 
}

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!