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 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-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 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;