Is it possible to change bootstrap sass colors with a click of a button? I tried googling but I didn't find anything. Thanks for any help <3
No you can't change bootstrap colors with a click of button in whole Sass file because it's not used in browser, It can't be done in CSS file globally if color is directly applied to properties.
But you can modify it if it's a CSS variable, a CSS variable looks like this
--theme-color : blue;
That might be possible if you are using preprocessors in Browser, less.js works in browser but I am not sure if you can change value of variable with a click in less.
I think you should review what you are actually creating.
Related
Like many developers I am using SASS as a preprocessor. I want to edit my stylesheets in Chrome. I've setup Source Maps to do this, and I know Chrome now supports SASS.
I have a SASS file, style.scss, used to create style.css used on the page. It's mainly just imports of other SASS files. Eg:
#import "colors";
Clicking an imported SASS file, like _colors.scss, it shows a green 'active' icon and shows it is linked to a source map.
However when I edit a SASS variable - like the $dark-blue in the screenshot below, where I've made it a red instead - the file doesn't change, nor does the page update.
How do I edit an imported SASS file in Chrome DevTools?
Edit: note the 'Linked to' on the imported file doesn't seem correct. The only way _colors.scss is used is part of style.scss which is turned into style.css. I suspect this is the cause of the problem. I've opened https://github.com/gulp-sourcemaps/gulp-sourcemaps/issues/349 to see if this is the case.
I am attempting to simply change the colour of the "is-primary" class in bulma. I am attempting to write a scss file to change the values without installing bulma via npm. I am attempting to import by using the cloudfare link, is this possible?
this is my scss file:
#import "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4./css/bulma.cssbulma/sass/utilities/initial-variables";
$tech-blue : #2c3e50;
$primary : $tech-blue;
#import "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.3/css/bulma.css";
This file compiles but I cannot find the corresponding css file and makes no affect to my actual page.
I don't think that this is possible. The variables in use by Bulma are only accessible by SCSS. So you need to build the whole thing to have your colors blend in. The rendered CSS already contains:
a {
color: #00d1b2; /* can't change that later on */
…
}
A feature request for Bulma would be to make those variables accessible via CSS variables. That way you could easily customize the look even with the pre-rendered CSS from the CDN.
I have a scss file that I call in
#import ..mixins
but when I try to call in methods from the mixin that is defined like this
#mixin myFunction($param1, $param2){
style:$param1
style:$param2
}
Phpstorm just gives a hint like
myFunction()
without any parameter information. Has anyone found any solutions to this?
Unfortunately it's not yet supported in current versions on PhpStorm/WebStorm (stable 2016.3 and upcoming 2017.1).
Watch these tickets (star/vote/comment) to get notified on any progress:
https://youtrack.jetbrains.com/issue/WEB-10806
https://youtrack.jetbrains.com/issue/WEB-24715
I came here searching for this myself, and it isn't supported even in 2018.
It's not going to give you hinting apparently, but, for often used mixins you can create a live template (snippet) with variables.
In your case:
1) - Navigate to Settings: File>Settings>Editor>Live Templates. Then click the '+' to add a new 'snippet'.
#mixin myFunction($$param1$, $$param2$);
The extra $ are for naming vars in Live Templates.
OR,
2) - Highlight the snippet of code to use for a new Live Template. Then press CTRL(CMD)-SHIFT-A and search "Save As Live Template". Double click or press enter to do '1)' much quicker if the code is already present.
That's a dirty workaround in the meantime.
What PHPStorm does support is: when you #include myMix, the hint will expand if you use the up, down arrows. Still not hinting, but almost.
I am trying to set up the mapping feature in Chrome canary. I followed the screenshots in this answer.
The main feature works, when I inspect an element, it points me to my local sass file and when I edit it, the local file safes, and the `sass --watch' is triggered. However, the browser does not refresh, even though on the "General" tab in devtools I have checked "Auto-reload CSS upon Sass save".
Should the browser reload? Is there a way to get it to reload?
Ps - I have compass but I can not use that as it does not support mapping, so I am compiling sass through the terminal
Thanks
You probably forgot this step:
In the Sources tab, find your generated CSS file, right click on it and choose Map to network resource, and select the same file name in the shown dropdown:
and then choose the matching file from your workspace:
It could be that the Sass-file is still compiling when Chrome tries to reload the CSS. Setting the 'Auto-reload CSS upon Sass save' Timeout to 5000 ms fixed it for me. When Chrome triggers the reload, it can even prevent Sass from recompiling the CSS.
I solved the problem by installing tincr extention and now when I save locally, the browser refreshes.
With a little bit of help from htaccess I managed to incorporate php inside my css documents. The problem with this is that textmate sees that the document has php tags and color coordinates that language over css. Is their anyway to switch back and forth manually (without removing php and saving the file)?
You can manually change the language of a file using the drop-down menu at the bottom of a document window. This crudely annotated screenshot shows where:
What is the extension of your file? .php or .css?
What does the language-selection menu at the bottom of the window says about your file? PHP or CSS? What happens if you change one for the other?
How is your file? <?php ... all your css ... ?> or body { background-color: <?php echo $todaysBgColor; ?>; } ...?
TextMate's theming is build around the notion of scope. If your file looks like my first example, there is a big chance all the CSS parts that you put inside of a PHP block are going to be treated as PHP by TextMate because of their scope.
I don't remember the keyboard shortcut but there is a command in the theme-creation bundle that shows you the scope of the word/character under the cursor. Write it down, then go to the Preferences window and edit your theme so that a CSS scope within a PHP scope looks like normal CSS.