sass and compass - getting started
DESCRIPTION
TRANSCRIPT
Sass & CompassPresented by: Ethan Gardner
What is Sass?
• CSS preprocessor written in Ruby
• Compiles to regular CSS
• Adds many helpful features to CSS…
Official Documentation: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html
What is Compass?
• An extension of Sass
• Contains many CSS3 helpers used in modern web development.
• Adds many helpful features to CSS…
Official Documentation: http://compass-style.org/reference/compass/
Retrofitting Compass to Existing Project
$ compass create --bare --sass-dir "sass" --css-dir "." --javascripts-dir "assets/scripts"--images-dir "images"
Installation: http://compass-style.org/install/
After Running…
Changing Options
To change these options after Compass has been added to the project, you can always edit the “config.rb” file
Starting Compass
Navigate to the directory that contains the “config.rb” file in the command line and type:
compass watch
Variables
• Common values can assigned to variables for use throughout a project.
• One of the best features of Sass
• $variable-name: value;
Using Variables
SCSS$accent-color:#17CF57;
h1 {color:$accent-color;
}
fieldset {border:1px solid $accent-color;
}
caption {background:$accent-color;color:#fff;
}
CSS outputh1 {color: #17cf57;
}
fieldset {border: 1px solid #17cf57;
}
caption {background: #17cf57;color: #fff;
}
Working with Variables
• Assign at the top of the file or in an external file
• Great for consistency
• Benefits are apparent with larger files
Nested Rules
Rules can be nested to add specificity to a selector.
Adding Specificity with Nested Rules
SCSSul {list-style-type: disc;li {
padding:10px;}
}
CSS outputul {list-style-type: disc;
}ul li {padding: 10px;
}
Ampersands in Nested Rules
When nested rules are used, an ampersand adds properties to a child selector and is useful for pseudo classes like :hover.
Ampersands in Nested Rules
SCSSa {text-decoration:none;&:hover {
text-decoration:underline;}
}
CSS outputa {text-decoration: none;
}a:hover {text-decoration: underline;
}
Ampersands in Nested Rules (cont’d)
SCSSp {font-size:14px;&.error {
color:#f00;font-weight:bold;
}
}
CSS outputp {font-size: 14px;
}p.error {color: #f00;font-weight: bold;
}
Did you catch the difference?
Notice there is no space between p and .error in the CSS from the previous example.
If you WANTED a space…
SCSSp {font-size:14px;.error {
color:#f00;font-weight:bold;
}
}
CSS outputp {font-size: 14px;
}p .error {color: #f00;font-weight: bold;
}
Multiple Nesting
You don’t have to stop at one level of nesting. Multiple levels of nesting can be VERY powerful.
Multiple Nesting
SCSS.tablesorter {border:1px solid #000;thead {
background:#000;color:#fff;th {
text-align:center;}
}tr {
background:#fff;}
}
CSS output.tablesorter {border: 1px solid #000;
}.tablesorter thead {background: #000;color: #fff;
}.tablesorter thead th {text-align: center;
}.tablesorter tr {background: #fff;
}
@extend
@extend uses the properties of a selector as the foundation for another selector
@extend
SCSS.session {padding-left:8px;padding-right:20px;background-repeat:repeat-y;
}
.keynote {@extend .session;background-image:url(cat-1.png);
}
.company {@extend .session;background-image:url(cat-2.png);
}
CSS output.session, .keynote, .company {padding-left: 8px;padding-right: 20px;background-repeat: repeat-y;
}
.keynote {background-image: url(cat-1.png);
}
.company {background-image: url(cat-2.png);
}
@import
Properties can be imported from other Sass files.
Tips for using @import
• Put common properties in external file
• Different than using @import in CSS
• Imported files should begin with an “_”
@import
SCSS// Loads Compass CSS3 helpers@import 'compass/css3';
// Loads user defined files@import 'base';@import 'reset';
CSS output/* Loads all helpers from Compass’ CSS3 modules and makes it available to the rest of our project.
Imports the “_base.scss” file and then imports the “_reset.scss” file .*/
@mixin
• Small piece of code that is used to build something larger
• Define once and use anywhere
• Can accept arguments and parameters
• Used via the @include keyword
@mixin – User Defined
SCSS
$border-color:#efefef;
@mixin content-area {border:1px solid $border-color;padding:10px 2%;
}
#article {@include content-area;float:left;width:60%;
}
#aside {@include content-area;float:right;width:30%;
}
CSS output#article {border: 1px solid #efefef;padding: 10px 2%;float: left;width: 60%;
}
#aside {border: 1px solid #efefef;padding: 10px 2%;float: right;width: 30%;
}
Compass @mixin
Compass provides mixins for common CSS3 features like gradients, box-shadow, text-shadow, etc.
@mixin – Compass
SCSS#article {@include background-image(linear-gradient(#dedede, #fff));color:$content-text-color;@include content-area; // user defined from previous example@include box-shadow;@include text-shadow;float:left;width:60%;
}
@mixin – Compass (cont’d)
CSS output#article {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dedede), color-stop(100%, #ffffff));
background-image: -webkit-linear-gradient(#dedede, #ffffff);background-image: -moz-linear-gradient(#dedede, #ffffff);background-image: -o-linear-gradient(#dedede, #ffffff);background-image: -ms-linear-gradient(#dedede, #ffffff);background-image: linear-gradient(#dedede, #ffffff);color: black;border: 1px solid #efefef;padding: 10px 2%;-webkit-box-shadow: 0px 0px 5px #333333;-moz-box-shadow: 0px 0px 5px #333333;box-shadow: 0px 0px 5px #333333;text-shadow: #efefef 0px 0px 1px;float: left;width: 60%;
}