i'm using Visual Studio Code and i have problem vith variables in CSS files, when i type a dollar sign, css file report error and browser won't see changes in file.
It seems you want to use SCSS ( Sass ) but it seems you didn't install Sass at all or visual studio code needs a plugin for that.
Probably you know what to do now.
This is how you define CSS variables. The variable you are looking at is used in SCSS. To use SCSS you need something like node-sass
:root {
--primary-color: red;
}
div {
background: var(--primary-color);
width: 200px;
height: 200px;
}
body {
color: var(--primary-color);
}
<div></div>
<p>
Lorem ipsum
</p>
To make VSCode aware of SCSS make sure the file is stored as such (.scss). If that still doesn't work set language mode to SCSS. The language mode can be found on the bottom right.
you are writing a sass syntax, so you need to save your file with (.scss) extension, and as Sass is a preprocessor scripting language, you also need a compiler to get a compiled css version like live sass compiler extesion in vscode to be able to connect the .css file with your index.html file
Related
I am developing a WordPress theme and I am trying to use sass from another file using the #use method but it doesn't seem to be working. How can I fix the problem since the #import rule method will be depreciated soon?
I have files
//_brand.scss
$base-color: #c6538c;
$border-dark: rgba($base-color, 0.88);
and then
//footer.scsss
#use 'brand' as b;
.footer{
padding: 0px 5%;
background-color: b.$base-color;
}
and I get this error when it's compiling
Compilation Error
Error: Invalid CSS after "...ground-color: b": expected expression (e.g. 1px, bold), was ".$font-size;"
on line 5 of sass/opt/lampp/.../sass/footer.scss
>> background-color: b.$base-color;
I am using "Live Sass Compiler" visual studio code extension to compile to CSS
If you want to use the variables you have defined within the brand.scss file across different files, you can use the #import directive. For using it, just add the line below to your footer.scss file:
#import "brand";
Source: https://www.w3schools.com/sass/sass_import.asp
I hope my answer will help you
I want to override the default values in scss file like
.auth-form {
width: 800px;
}
I change the width values in class auth-form scss file. But it is not working.
How to override the values in scss file. Please let me know.
Making assumptions on what will be the case you are probably facing a scope issue. If you have the following css:
.foo .bar {
color: red;
}
.bar {
color: blue;
}
.bar will always be red, because you are not overwriting the selector in the correct scope.
So in your case you need to specify the full selector:
.full.scope .auth-form {
width: 800px;
}
Where .full.scope is the full selector to .auth-form. You can get the full selector using on the css you eqnt to overwrite using the browser inspector.
Another option will be to make the property prioritary using the !important css keyword so it will overwrite any previous definition:
.auth-form {
width: 800px !important;
}
Hope it helps.
.scss (sass) files are not directly loadable into browsers, they need to be compiled to .css files first, then those are loaded into browsers by your application.
It seems you are not performing the compilation step (also called preprocessing or precompiling) and this is the reason you do not see the modification in your app.
How the compilation should be done varies. You may use sass directly (see here) or if you are using a framework there may be tools that combine this and other automation steps. For instance in Ruby-on-Rails you would install the required compile tool in the form of a gem and run:
bundle exec rake assets:precompile
As you do not provide details on your environment / framework is is difficult to provide the exact procedure applicable to you.
I am using Angular5 with sass v1.3.2.
I want to be able to change a color that is used extensively in the scss files of my single page app in runtime (not by compiling new files).
The color is defined globally in my _variables.css as:
$brand: #123123;
And for example used as:
h1 {
color: $brand;
}
I learned that I can modify the color if I am using CSS variables such as:
# CSS
:root {
--brand: #123123
}
#JS
document.documentElement.style.setProperty('--brand', '#456456');
# OR
document.querySelector(':root').style.setProperty('--brand', '#456456');
However to be able to do that using SCSS, I needed to use css-vars mixin as such:
$brand: #123123;
:root {
#include css-vars((
--brand: #{$brand},
));
}
And use it as:
h1 {
color: var(--brand);
}
Two problems:
Actually, still --brand is not showing at root.
Also, the CSS generated in <script type="text/css"> by angular-cli does not have --brand anywhere, it is actually compiling the CSS variable into #123123 so the output is:
h1 {
color: #123123;
}
Any ideas about how can I achieve changing a global color in runtime? Or how to get my CSS in :root and then how to get SASS to not compile it?
UPDATE
As #JonUleis has showed, there is no need for using css-var. Now the var --brand shows in the DOM at :root.
However, now color: var(--brand); line still does not show in the CSS, and h1 doesn't have a color style at all.
After updating node-sass to the latest 4.9.0 from 4.8.3, it worked great.
You're likely on an outdated version of node-sass that wasn't yet compatible with the syntax for CSS custom properties.
Here's your example code compiling successfully using Sassmeister without using the css-vars mixin:
I'm trying to import some classes from a CSS file like bootstrap.css to my site.scss SASS file, not all of them. The problem with following code is that I get all bootstrap classes in my compiled site.css file:
site.scss
#import "bootstrap";
.my-div-md-6
{
/*some other styles*/
#extend .col-md-6;
}
On the other hand, It is possible to do this with LESS by importing bootstrap.css as reference using this code:
site.less
#import (less, reference) "bootstrap.css";
.my-div-md-6{
/*some other styles*/
&:extend(.col-md-6);
}
The compiled output of LESS is very light as below:
site.css
.my-div-md-6 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
#media (min-width: 992px) {
.my-div-md-6 {
float: left;
}
.my-div-md-6 {
width: 50%;
}
}
.my-div-md-6 {
/*some other styles*/
}
Is it possible to achieve this with SASS? If yes, giving a quick example would help.
Unfortunately, there is not simple answer and at the time of writing this, Ruby Sass does not natively support the LESS import (reference) feature.
TLDR; Suggestions:
use uncss or postcss to remove the compiled css from file before finalising stylesheet.
if you can, use mixins and placeholder classes as a rewrite of the scss file, but this is the MOST time consuming.
import "file" as partial such that file="_file.scss" and #extend .class if you absolutely have to, (manual method but suppose it'll work)
UNCSS
You can use uncss as a package from npm to remove the compiled css (I know this isn't efficient, but if you had to use SASS), then you'd remove the chaff that's generated from the example bootstrap import.
HOW?
QUOTE: SO-Answer-Joesph
How? The process by which UnCSS removes the unused rules is as follows:
The HTML files are loaded by PhantomJS and JavaScript is executed.
Used stylesheets are extracted from the resulting HTML.
The stylesheets are concatenated and the rules are parsed by css-parse.
document.querySelector filters out selectors that are not found in the HTML files.
The remaining rules are converted back to CSS.
So yes, it removes selectors not in the DOM at runtime. If you have dynamically added selectors, you can make uncss ignore them by commenting: /* uncss:ignore */ before them, e.g...
MAKE SURE YOU ADD THE MEDIA OPTION IN UNCSS
REF: SO-Answer-Deksden
SASS Background research:
Summarising above:
nex3: one of the core leads for sass, has been at google and working on dart. They released dart-sass (unstable release) as a rewrite in favour to replace and improve upon ruby sass. This is interesting as this rewrite also explains the lack of feature development in Ruby Sass as well as the need for a rewrite. Since a core contributor of a ruby sass port: i.e. libsass (C++ implementation of ruby-sass) left the libsass team, it brings a further impetus to improve on sass performance.
Credit:
Joesph
Deksden
I've been using compass with blueprint for a while now and one thing I can't figure out is why it generates all the basic blueprint css classes. Like these:
#container .span-3 { width: 110px; }
#container .span-4 { width: 150px; }
I specify --using blueprint/semantic when creating the compass project, and no I don't have #include blueprint anywhere in my source. Why are these classes being generated and how do I get compass not to include them?
I tried to reproduce your problem but I can't. Here's what I did and what I got:
compass create my_project --using blueprint/semantic
The generated screen.scss file seems to want you to #import "blueprint", as it contains the following lines initially:
// Import all the default blueprint modules so that we can access their mixins.
#import "blueprint";
The generated screen.css file does not contain .span-x anywhere, and the only place #container appears is in body.two-col #container {.
I modified the screen.scss file and recompiled. No change -- no non-semantic classes showed up in screen.css.
Hope this helps...
(Tested with Compass version 0.11.5, Ruby 1.8.7, FreeBSD 8.2)