使用 sass/scss 编写CSS 快速上手_html/css_WEB-ITnose
文章作者:松阳
Why Scss
CSS不是一种编程语言,它只是个配置文件,并没有生命。但我等大程序 怎么能容忍自己写出来的东西不能动态变化,不能封装继承,不能xxoo呢,于是就有了css预处理的概念。即,写是一套,用是一套。Scss是css预处理的一个选择,它依托于Ruby,算是逼格比较高的。相似的还有Less等,语言优劣之争意义不大,用好一个其他也是大同小异。
安装
Mac上自带Ruby,直接运行:
gem install sass
安装对应模块,然后可以使用:
sass --watch style.scss:style.css
命令来监视style.scss,当它有更改时,会自动编译成style.css。
友情提示: 我运行gem时完全不动,还以为是掉网了。后来听说是我大GFW威武,可以将源更改为x宝的服务器来解决:
$ gem sources -l$ gem sources --remove https://rubygems.org/ $ gem sources -a http://ruby.taobao.org/$ gem sources -l//然后我顺手更新了一下Ruby的版本$ sudo gem update --system
经过上面的折腾,顺利安装sass
常用语法
变量
//定义$magin : 30px; //px$blue : #1875e7; //color$side : left; //str Usage: boder-#{$side}-radius
所有的数字类型的变量都可以进行相应的计算。
嵌套
nav { ul {...} border : { //注意冒号 相当于树形属性 会编译成 border-color:red color : red; } a { &:hover { color :$blue;} //&表示引用上层 会编译成 a:hover{...} }}
注释
标准的CSS注释 /* comment */ ,会保留到编译后的文件。
单行注释 // comment,只保留在SASS源文件中,编译后被省略。
在/*后面加一个感叹号,表示这是"重要注释"。即使是压缩模式编译,也会保留这行注释,通常可以用于声明版权信息。
继承
使用@extend可以继承相应的css:
.class1 { border:1px solid #ddd;}.class2 { @extend .class1; border-color: green;}
写的时候要注意顺序,编译时,css是不会调顺序的,谁先谁后得想好了。
Mixin
这个是一个函数与宏的私生子。实现像函数,使用像宏。关键词为@mixin和@include
@mixin left($color, $value:10px) { color:$color; margin-left:$value;}.mydiv { @include left($blue,15px);}
颜色处理函数
lighten(#cc3, 10%) // #d6d65cdarken(#cc3, 10%) // #a3a329grayscale(#cc3) // #808080complement(#cc3) // #33c$linkColor: #08c;a { text-decoration:none; color:$linkColor; &:hover{ color:darken($linkColor,10%); }}
用这个方法就能制作一个链接变灰的效果
引入文件
@import "style2.css";
逻辑编译
想要真正的动起来,就得有判断啦,循环啦常规流程函数。
@if可一个条件单独使用,也可以和@else结合多条件使用
$type: monster;p { @if $type == ocean { color: blue; } @else if $type == matador { color: red; } @else if $type == monster { color: green; } @else { color: black; }}
for循环有两种形式,分别为:@for $var from
@for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; }}
each语法为:@each $var in 。其中$var表示变量,而list和map表示list类型数据和map类型数据。
$animal-list: puma, sea-slug, egret, salamander;@each $animal in $animal-list { .#{$animal}-icon { background-image: url('/images/#{$animal}.png'); }}$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);@each $header, $size in $headings { #{$header} { font-size: $size; }}
sublime 分页
其实这个也不能算是Scss的知识了,只不过是用到它更方便一些。Sublime可以左右分屏,我们可以将源文件放在左侧的窗口中编译后的放在右侧,方便我们做检查。Mac上的快捷键比较变态:
cmd+option+ctrl+2
左右移动使用
cmd+shift+[
如果你觉得这篇文章对你有帮助,可以顺手点个顶,不但不会喜当爹,还能让更多人能看到它...

Outils d'IA chauds

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

AI Hentai Generator
Générez AI Hentai gratuitement.

Article chaud

Outils chauds

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

Le cache de mise à jour de la page Web du compte officiel, cette chose est simple et simple, et elle est suffisamment compliquée pour en boire un pot. Vous avez travaillé dur pour mettre à jour l'article officiel du compte, mais l'utilisateur a toujours ouvert l'ancienne version. Dans cet article, jetons un coup d'œil aux rebondissements derrière cela et comment résoudre ce problème gracieusement. Après l'avoir lu, vous pouvez facilement faire face à divers problèmes de mise en cache, permettant à vos utilisateurs de toujours ressentir le contenu le plus frais. Parlons d'abord des bases. Pour le dire franchement, afin d'améliorer la vitesse d'accès, le navigateur ou le serveur stocke des ressources statiques (telles que des images, CSS, JS) ou du contenu de la page. La prochaine fois que vous y accédez, vous pouvez le récupérer directement à partir du cache sans avoir à le télécharger à nouveau, et il est naturellement rapide. Mais cette chose est aussi une épée à double tranchant. La nouvelle version est en ligne,

L'article discute de l'utilisation des attributs de validation de formulaire HTML5 comme les limites requises, motifs, min, max et longueurs pour valider la saisie de l'utilisateur directement dans le navigateur.

Cet article démontre un ajout de bordure PNG efficace aux pages Web à l'aide de CSS. Il soutient que CSS offre des performances supérieures par rapport à JavaScript ou à des bibliothèques, détaillant comment ajuster la largeur, le style et la couleur des bordures pour un effet subtil ou proéminent

L'article examine les meilleures pratiques pour assurer la compatibilité des navigateurs de HTML5, en se concentrant sur la détection des fonctionnalités, l'amélioration progressive et les méthodes de test.

L'article traite du HTML & lt; Datalist & GT; élément, qui améliore les formulaires en fournissant des suggestions de saisie semi-automatique, en améliorant l'expérience utilisateur et en réduisant les erreurs. COMMANDE COMPRES: 159

L'article traite du HTML & lt; mètre & gt; élément, utilisé pour afficher des valeurs scalaires ou fractionnaires dans une plage, et ses applications courantes dans le développement Web. Il différencie & lt; mètre & gt; De & lt; Progress & gt; et ex

Cet article explique le html5 & lt; time & gt; élément de représentation sémantique de date / heure. Il souligne l'importance de l'attribut DateTime pour la lisibilité à la machine (format ISO 8601) à côté du texte lisible par l'homme, stimulant AccessIbilit

L'article traite du HTML & lt; Progress & GT; élément, son but, son style et ses différences par rapport au & lt; mètre & gt; élément. L'objectif principal est de l'utiliser & lt; Progress & gt; pour l'achèvement des tâches et & lt; mètre & gt; pour stati
