Is there a multiline in SASS?
No, Sass does not support multiline statements (https://github.com/sass/sass/issues/216). But the new SCSS syntax in Sass3 does because it is whitespace agnostic, just like CSS.
Wrapping long media queries in Indented Syntax SASS
This won't be an issue in a scss syntax
An example: http://sassmeister.com/gist/11494141.
Unfortunately sass syntax doesn't support multiple line
http://sass-lang.com/documentation/file.INDENTED_SYNTAX.html#multiline_selectors
You could place the media queries parameters as a variable to have a cleaner indentation and to solve this issue (although it's not the best solution).
$media-queries: "(-webkit-min-device-pixel-ratio: 2) and (min--moz-device-pixel-ratio: 2) and (-o-min-device-pixel-ratio: 2 / 1) and (min-device-pixel-ratio: 2) and (min-resolution: 192dpi) and (min-resolution: 2dppx)"
@media only screen and #{$media-queries}
.logo
background: #F00
Multi line comment in SASS throwing error
Try to indent the comment */
along with the content by at least 2 spaces, if you are using it on a multiline. Here's an example on codepen: http://codepen.io/anon/pen/XjJAbQ
/* This should work */
///*//This won't work!//*/
///*//This will not work// */
/** * This is a multi line comment * And this should work. */
// This is a sass comment.someClass width: 200px height: 200px background: #000
<div class="someClass"> </div>
How can I use sass maps with SASS syntax (not SCSS)?
SASS doesn't support multiline syntax for maps.
The solution at present moment
$column-width: (first: 210px, second: 200px, third: 100px)
How do I use mixins in Sass using the indented (old style) syntax?
The problem here is that you've only defined the mixin, not actually invoked it. If you want to call the mixin, you must use the proper syntax:
.foo
+transform($translate3d: 275px 0 0)
Also, if you plan on reusing your mixins elsewhere, you should place them at the root level. Where they are now, they can only be seen inside that particular instance of your .hide_menu class.
Indented Sass syntax not working with node-sass and gulp-sass
Updated answer:
If you want to use the indented syntax (.sass) as the top level file, use sass({indentedSyntax: true}).
sass({indentedSyntax: true})
Outdated answer
Answer found here: https://github.com/dlmanning/gulp-sass/issues/55#issuecomment-50882250
With default settings compiling sass files doesn't work. However there is a workaround. If you pass sourceComments: 'normal' as parameter the compilation work. The reason for this is that there is a strange condition which change how file are handled: https://github.com/dlmanning/gulp-sass/blob/master/index.js#L23-L27
Code example found here: https://github.com/chrisdl/gulp-libsass-example/blob/master/gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
// Run with "> gulp sass" in terminal.
gulp.task('sass', function () {
gulp.src('./sass/main.sass')
.pipe(sass({sourceComments: 'normal'}))
.pipe(gulp.dest('./css'));
});
Notice
If you run into issues using this snippet take a look at the following quote and issue.
Using this workaround will result in any changes to the file content from earlier in the gulp pipeline (e.g. earlier plugins) being discarded - JMM
https://github.com/dlmanning/gulp-sass/issues/158
Related Topics
Bootstrap Change Order of Columns
Stacking Order of Elements Affected by Opacity
What Is This CSS Selector? [Class*="Span"]
Why Can't I Save CSS Changes in Firebug
Suggestions for Debugging Print Stylesheets
Using Font Awesome Icon for Bullet Points, with a Single List Item Element
Forcing Child to Obey Parent's Curved Borders in CSS
Webpack "Ots Parsing Error" Loading Fonts
Css3 Flexbox: Display: Box VS. Flexbox VS. Flex
CSS Selector (Id Contains Part of Text)
How to Use Relative/Absolute Paths in CSS Urls
How to Make a Circle Around Content Using CSS
Margin-Top Not Working with Clear: Both
CSS Get Height of Screen Resolution
Mask Image, Create Rectangle from Multiple Gradients
Can You Target an Element with CSS Only If 2 Classes Are Present