View SassMeister-input-HTML.html
<div class="theme-1"> | |
<div class="side-nav">This is theme 1</div> | |
</div> | |
<div class="theme-2"> | |
<div class="side-nav">This is theme 2</div> | |
</div> |
View SassMeister-output.css
/*$color--primary: #b29; | |
$color--secondary: #19d; | |
@mixin btn-me($color: hotpink, $size: normal) { | |
border: 1px solid $color; | |
border-radius: 1.5em; | |
background: none; | |
outline: none; | |
transition-duration: .25s; | |
cursor: pointer; |
View Gruntfile2.js
module.exports = function (grunt) { | |
grunt.initConfig({ | |
sass: { | |
dist: { | |
files: { | |
'css/tn.css': 'scss/tn.scss' | |
}, | |
options: { | |
sourcemap: 'none' |
View tn-mediaqueries.css
@media screen and (min-width: 320px) and (max-width: 479px) { | |
#wrapper { | |
width: 93.8%; | |
border: none; | |
text-align: center; | |
margin: 5px; | |
/*background-color: #ff0066;*/ | |
} | |
#wrapper header nav li { |
View Gruntfile.js
module.exports = function (grunt) { | |
grunt.initConfig({ | |
sass: { | |
dist: { | |
files: { | |
'css/tn.css': 'scss/tn.scss', | |
'css/tn-mediaqueries.css': 'scss/tn-mediaqueries.scss' | |
}, | |
options: { | |
sourcemap: 'none' |
View tn.css
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } | |
audio, canvas, video { display: inline-block; display: inline; } | |
audio:not([controls]) { display: none; } | |
[hidden] { display: none; } | |
body { | |
font-size: 0.9em; | |
font-family: Arial, Helvetica, sans-serif; | |
color: #000000; | |
margin: 0px; |