Sass Indented Syntax on Multiple Lines

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



Leave a reply



Submit