Working on calc css function its work properly in browser and less file. But my text-editor shows error within css file.
This is the css file (I use VS code)
You don't define $gutter-horizontal anywhere, so its value cannot be used in the calculation. You need to initialise this variable with something like:
$gutter-horizontal: '12px';
Note that calc() will not work correctly with Sass, and to accommodate for this, you'll need to interpolate the variable:
width: calc((100% - #{$gutter-horizontal}) / 2)
Also, the vast majority of your CSS won't compile as you have pre-processed SASS in a .css file. You can convert it to regular CSS using an online tool such as SassMeister (or simply change the file extension to .scss, assuming your project can compile SASS).
your file is a css, your syntax it's for some preprocessor like sass or less
Related
So, let's say I have a SASS module _module.scss that declares some css variables aka custom properties. When I now load this module in another SASS styleshee, let's call it main.scss, I have access to all SASS-variables, mixins and also rules, but not the custom properties inside of it? Am I missing something?
Example files:
//_module.scss
:root {
--some-variable: red;
}
// main.scss
#use 'module';
div {
background-color: var(module.--some-variable); // won't work, private property because of leading '-'
background-color: module.var(--some-variable); // won't work, would have been horrible syntax as well
}
I could use #import but that is discouraged and deprecated (see SASS Documentation). I've tried including the variables in a pure css file module.css, which compiled but didn't declare any custom properties at runtime as it directly translates the #use 'module' from my SASS file to the exact same in CSS - which browsers don't understand obviously. It should just more or less copy the content of a pure css file but it doesn't. Sure, I could try writing mixins in my modules that set the variables but that's just a workaround.
Am I missing something? Do I really need to write a mixin, that sets the variables and needs to be loaded? This makes the use of custom properties within modules pretty cumbersome.
EDIT
Forgot to mention, that background-color: var(--some-variable) doesn't work either even though it should according to the documentation, since rules should just be applied directly without scoping.
Ugh. The issue is most definitely the fact that my VS Code extension uses LibSass and not Dart Sass. Therefore #use is not yet supported in most environments. The documentation should most definitely be more explicit about this especially when warning about the use of #import.
Since I know it works with #import the issue is resolved though I'd love to see the module system being included in LibSass as well.
tl;dr
Do no use #use if you're not absolutely certain that you use Dart Sass!
I have created a blank project in angular 4 and I am trying to design it but the sass isn't working when ever I add sass and run project I am getting this error
body{
h1{
color : red;
}
}
^
Invalid CSS after "body{": expected "}", was "{"
in C:projectname/src\styles.sass (line 1, column 6)
My index.html code is
<body>
<h1>Here</h1>
</body>
Any help would be appreciated
Based on your error message (C:projectname/src\styles.sass) It seems you're using the .sass extension for a SCSS file. Change your file name to styles.scss.
Sass and SCSS use two different and incompatible syntaxes.
There are two syntaxes available for Sass. The first, known as SCSS
(Sassy CSS) and used throughout this reference, is an extension of the
syntax of CSS. This means that every valid CSS stylesheet is a valid
SCSS file with the same meaning. This syntax is enhanced with the Sass
features described below. Files using this syntax have the .scss
extension.
The second and older syntax, known as the indented syntax (or
sometimes just “Sass”), provides a more concise way of writing CSS. It
uses indentation rather than brackets to indicate nesting of
selectors, and newlines rather than semicolons to separate properties.
Files using this syntax have the .sass extension.
I've started Vim (v8) and have proper syntax highlighters in place for css3. I am using postcss plugin called precss to provide for "SASS" like syntax in my code.
However, when I used a nested selector with "&:last-child" or &:first-child, the syntax throws an error. It doesn't break the code or anything, but that "red" error is so distracting for me. Check the screen shot below.
Anyone can figure out how to make this error go?? I use a plugin called vim-css3-syntax and it includes scss syntax highlighting.
Edit: Got it fixed by downloading https://github.com/cakebaker/scss-syntax.vim and then adding au BufRead,BufNewFile *.css set filetype=scss.css
Thanks in advance.
The fact that you are using SCSS syntax (nested blocks, &, etc.) in CSS makes your CSS invalid.
If you want to avoid syntax errors you have two paths:
stop using SCSS syntax in your CSS files,
make sure your file is recognized as what it is: SCSS.
I would consider the first path to be the most sensible. After all who writes JavaScript in a *.rb file or SCSS in a *.css file? But if you choose the second you can simply do:
setf scss
--- edit ---
Suppose we have this code:
body {
background-color: white;
}
It's both valid CSS and valid SCSS because SCSS is a superset of CSS. Any valid CSS is automatically valid SCSS. Vim will happily display it without any error, no matter what file extension (*.css, *.scss) and filetype (css, scss).
Now, suppose we have this code:
body {
h1 {
background-color: $brand-1;
}
}
It's valid SCSS but not valid CSS. If you write that code in a *.css file with the css filetype, you get errors because it's not CSS. If you write that code in a *.scss file with the scss filetype you don't get errors because it's valid SCSS.
We have a hundreds of .less files in production, but would like to start incorporating .scss files as well.
Would I need to make my own file type in order to compile mutliple types of CSS preprocessor files or is there already a way to do something like this:
#import 'less-styles.less';
#import 'scss-styles.scss';
#import 'stylus-styles.styl'; //potentially
whereby it produces a single CSS file in that order.
Because of valid CSS code is also valid Less code, you could compile your SCSS and stylus files first to CSS and import that.
sass scss-styles.scss scss-styles.css
Than in your Less code:
#import (less) scss-styles.css
The less keyword above does:
less: treat the file as a Less file, no matter what the file extension
The above means that you can extend and mixin the CSS selectors from the scss-styles.css file in your Less code.
Notice that variables and mixins from the from the scss-styles.css file are not available for (re)use in Less.
If you need the variables and mixins too, the only solution seems to convert your SCSS to Less. See also: https://github.com/bassjobsen/grunt-scss2less
You should be able to do the same for your stylus (.styl) files.
So far I have not seen any tools that would allow developers to cross-reference LESS mixins from Sass, or versa-vice.
That doesn't mean that you can't use multiple preprocessors in the same site, it just means that you will be limited in how they can interact. With concatenation and minification tools you could certainly build LESS and Sass separately and then merge them into a single file that gets minified.
With all of that said, I highly discourage that approach. Pick a technology for the project, and stick with it. That way you can make the most of the tools at hand, and only have to worry about a single technology lifecycle (updates, API changes, etc).
I've just started using SASS. Very impressed, however there is something I'd like to do but can't seem to find answer as whether or not it's possible.
I have a block of CSS that I don't want SASS to parse/compile but I would still like that block outputting to the final compiled CSS file. Is this possible?
Thanks.
My first ever SO question, normally provides the answer. Hope I've not missed it somewhere, tried every search term I could think of to find it.
Put it in a separate .css file and import it in your SASS file. File ending in .css are not parsed but are still included in the final output.
This question is a bit old, but, in the spirit of keeping things up-to-date:
The current version of SASS (3.4.22) does a pretty good job of only changing what it needs to. If what you've written is valid CSS, it should output as is.
The only times you should see SASS modifying your styles is if you've done something that looks like it's supposed to be modified. Based on their documentation, that would be things like:
Nesting styles
Concatenating strings
content: 'foo' + 'bar';
Using interpolation
left: calc(50% - #{$variable})
Using variables
width: $variable
Using #extend or nesting an #include
In most other situations, in my experience, SASS will happily spit out whatever you've written.
If you do need to output something that SASS insists on parsing when it doesn't need to, you can wrap the offending piece in quotes and remove them using the unquote function:
$family: unquote("Droid+Sans");
#import url("http://fonts.googleapis.com/css?family=#{$family}");
which compiles to
#import url("http://fonts.googleapis.com/css?family=Droid+Sans");
Try to enclose your block in /* ..... */ in your scss file. Hope it helps.