Scribd
Upload
83 views

Sass CSS Preprocesor Basics

This document provides an overview of how to install and use Sass (Syntactically Awesome Style Sheets), a CSS preprocessor. It explains how to compile Sass files into CSS using the sass command, and demonstrates some key Sass features like variables, nesting, mixins, and operators that allow CSS code to be more modular, reusable, and maintainable.

Uploaded by

Alberto
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
83 views

Sass CSS Preprocesor Basics

This document provides an overview of how to install and use Sass (Syntactically Awesome Style Sheets), a CSS preprocessor. It explains how to compile Sass files into CSS using the sass command, and demonstrates some key Sass features like variables, nesting, mixins, and operators that allow CSS code to be more modular, reusable, and maintainable.

Uploaded by

Alberto
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

SASS

INSTALAR SASS
https://sass-lang.com/guide
…:~$ sudo gem instal sass
…:~$ sass -v

COMPILAR SASS

Tenemos que crear un fichero .sass que será el de escucha y creará un .css para nuestro
proyecto.

<link rel="stylesheet" href="style.css" />

…:~$ cd /project
…:~$ sass --style.scss:style.css

output file
input file

VARIABLES

SCSS CSS
$font-stack: Helvetica, sans-serif; body {
$primary-color: #333; font: 100% Helvetica, sans-serif;
color: #333;
body { }
font: 100% $font-stack;
color: $primary-color;
}

NESTING

nav {
nav ul {
ul {
margin: 0;
margin: 0;
padding: 0;

padding: 0;
list-style: none;
list-style: none;
}
}
nav li {
display: inline-block;
li { display: inline-block; }
}
nav a {
a {
display: block;
display: block;
padding: 6px 12px;
padding: 6px 12px;
text-decoration: none;
text-decoration: none;
}
}
}
IMPORT

MIXINS

@mixin transform($property) { .box {


-webkit-transform: $property; -webkit-transform: rotate(30deg);
-ms-transform: $property; -ms-transform: rotate(30deg);
transform: rotate(30deg);
transform: $property; }
}
.box { @include transform(rotate(30deg)); }

OPERATORS

article[role="main"] { article[role="main"] {
float: left; float: left;

width: 600px / 960px * 100%; width: 62.5%;


} }

aside[role="complementary"] { aside[role="complementary"] {
float: right; float: right;
width: 300px / 960px * 100%; width: 31.25%;
} }

You might also like