Joël Lesenne joellesenne

## SCSS.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                joellesenne
                / SCSS.md
            
            
              Created
              September 1, 2017 17:50
                — forked from jareware/SCSS.md
            
              
                Advanced SCSS, or, 16 cool things you may not have known your stylesheets could do
              
          
    ⇐ back to the gist-blog at jrw.fi
Advanced SCSS

Or, 16 cool things you may not have known your stylesheets could do.  I'd rather have kept it to a nice round number like 10, but they just kept coming.  Sorry.
I've been using SCSS/SASS for most of my styling work since 2009, and I'm a huge fan of Compass (by the great @chriseppstein).  It really helped many of us through the darkest cross-browser crap.  Even though browsers are increasingly playing nice with CSS, another problem has become very topical: managing the complexity in stylesheets as our in-browser apps get larger and larger.  SCSS is an indispensable tool for dealing with this.
This isn't an introduction to the language by a long shot; many things probably won't make sense unless you have some SCSS under your belt already. That said, if you're not yet comfy with the basics, check out the aweso

  
## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style id="jsbin-css">
body {
  display: flex;
  flex-direction: column;

## gist:2e711650b7742bb834dc
assets/css/
|
|-- utility/              # Utility SASS that is not outputted
|   |-- _mixins.scss      # Declarations, Functions, Generic Variables (think brand colors), Extends
|   |-- _utility.scss
|   |-- _colors.scss
|   ...
|
|-- base/                 # Generic Styles that are not attached to specific modules
|   |-- _base.scss        # base

## bootswatchlet.js
if($('.bootswatcher')[0]){
	$('.bootswatcher').remove();
} else {
	var $e = $('<select class="bootswatcher"><option>Amelia</option><option>Cerulean</option><option>Cyborg</option><option>Journal</option><option>Readable</option><option>Simplex</option><option>Slate</option><option>Spacelab</option><option>Spruce</option><option>Superhero</option><option>United</option></select>');
	var l = 1 + Math.floor(Math.random() * $e.children().length);
	$e.css({'z-index': '99999', 'position': 'fixed', 'top': '5px', 'right': '5px', 'opacity': '0.5'}
	).hover(
		function(){$(this).css('opacity', '1');},
		function(){$(this).css('opacity', '0.5');}
	).change(function(){
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<style id="jsbin-css">
	body {
	display: flex;
	flex-direction: column;
	assets/css/
	\|
	\|-- utility/ # Utility SASS that is not outputted
	\| \|-- _mixins.scss # Declarations, Functions, Generic Variables (think brand colors), Extends
	\| \|-- _utility.scss
	\| \|-- _colors.scss
	\| ...
	\|
	\|-- base/ # Generic Styles that are not attached to specific modules
	\| \|-- _base.scss # base
	if($('.bootswatcher')[0]){
	$('.bootswatcher').remove();
	} else {
	var $e = $('<select class="bootswatcher"><option>Amelia</option><option>Cerulean</option><option>Cyborg</option><option>Journal</option><option>Readable</option><option>Simplex</option><option>Slate</option><option>Spacelab</option><option>Spruce</option><option>Superhero</option><option>United</option></select>');
	var l = 1 + Math.floor(Math.random() * $e.children().length);
	$e.css({'z-index': '99999', 'position': 'fixed', 'top': '5px', 'right': '5px', 'opacity': '0.5'}
	).hover(
	function(){$(this).css('opacity', '1');},
	function(){$(this).css('opacity', '0.5');}
	).change(function(){