Sass nos dias de hoje

Vinícius Palma $twitter: _viniciuspalma_; $github: viniciuspalma; $facebook: viniciuswpalma;

separação entre o Estilo e o conteúdo .class { display:
inline-block; width: 100px; height: 100px; border: solid 1px green; background: red; }

pré processadores

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

FEATURES Variables nav { ul { margin: 0; padding: 0;
list-style: none; } li {display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } } nesting

FEATURES Variables @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius:
$radius; border-radius: $radius; } .box { @include border-radius(10px); } nesting mixins

FEATURES Variables .container { width: 100%; } article[role="main"] { float:
left; width: 600px / 960px * 100%; } aside[role="complimentary"] { float: right; width: 300px / 960px * 100%; } nesting mixins operators

FEATURES Variables @for $i from 1 through 3 { .item-#{$i}
{ width: 2em * $i; } } nesting mixins operators loop .item-1 { width: 2em; } .item-2 { width: 4em; } .item-3 { width: 6em; }

FEATURES Variables @each $animal in puma, sea-slug, egret { .#{$animal}-icon
{ background-image: url('/img/#{$animal}.png'); } } nesting mixins operators loop .puma-icon { background-image: url('/img/puma.png'); } .sea-slug-icon { background-image: url('/img/sea-slug.png'); } .egret-icon { background-image: url('/img/egret.png'); }

FEATURES Variables $i: 6; @while $i > 0 { .item-#{$i}
{ width: 2em * $i; } $i: $i - 2; } nesting mixins operators loop .item-6 { width: 12em; } .item-4 { width: 8em; } .item-2 { width: 4em; }

FEATURES Variables p { @if 1 + 1 == 2
{ border: 1px solid; } @if 5 < 3 { border: 2px dotted; } @if null { border: 3px double; } } nesting mixins operators loop p { border: border: 1px solid; } conditionals

instalação gem install sass http://sass-lang.com/install

workflow

manual

task runners

task runners module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), sass:
{ dist: { files: { 'style/style.css' : 'sass/style.scss' } } }, watch: { css: { files: '**/*.scss', tasks: ['sass'] } } }); grunt.loadNpmTasks('grunt-contrib-sass'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.registerTask('default',['watch']); }

task runners

task runners var gulp = require('gulp'); var sass = require('gulp-sass');
gulp.task('sass', function (){ gulp.src('./assets/sass') .pipe(sass({ outputStyle: 'compressed', sourceComments: 'map', includePaths : './assets/sass' })) .on('error', function(err){ displayError(err); }) .pipe(gulp.dest('./public/css')) }); gulp.task('default', ['sass'], function() { gulp.watch('./assets/sass', ['sass']); });

Ruby on rails

Ruby on rails @import 'compass', 'normalize-css', 'base/colors', 'base/typography', 'helpers/mixins', 'helpers/placeholders',
'helpers/utils', 'structure/footer', 'structure/header_footer_internal', 'structure/wrapper', 'base/global_landing', 'structure/global', 'components/buttons', 'components/adaptativa_card', 'components/progress_bar', 'modules/learning_unit/video', 'modules/learning_unit/questions', 'modules/learning_unit/performance', 'modules/dashboard/study_plan', 'modules/disciplines/search', 'modules/disciplines/lessons'

Ruby on rails <!DOCTYPE html> <html> <head> <title> MC champions
</title> … <%= stylesheet_link_tag 'application', media: 'all' %> <%= csrf_meta_tags %> … </head> <body>

componentes

.progress-bar { height: 100px; background: $light-gray; border-bottom: solid 1px darken($light-gray,
10%); &__title { float: left; font-size: 23px; line-height: 100px; color: $blue-font; } &__info { float: right; &__percentage { font-size: 12px; strong { font-size: 22px; } } &__bar { width: 170px; height: 25px; border-radius: 4px; background: darken($light-gray, 10%); &__progress { display: inline-block; height: 25px; background: $blue-font; border-radius: 4px; } } } }

resultado:

metodologias de desenvolvimento

OOCSS SMACSS BEM DRY CSS

BEM (block, element and modifier)

então

então <div class="progress-bar"> <div class="progress-bar__info"> <p class=“progress-bar__info__percentage"> <strong><%= discipline.user_progress(current_user) %>%</strong>
das aulas estudadas </p> <div class="progress-bar__info__bar"> <div class="progress-bar__info__bar__progress" style="width: <%= discipline.user_progress(current_user) %>%”> </div> </div> </div> </div>

Obrigado!

Sass nos dias de hoje

Sass nos dias de hoje

More Decks by Vinícius Palma

Other Decks in Programming

Featured

Transcript