Im trying to change the default font size of my h1,h2,h3 etc. by using the settings file and compiling via SASS.
I've changed the line:
$h1-font-size: rem-calc(44);
To:
$h1-font-size: rem-calc(70);
But the font size stays the same.
I've removed any other CSS to avoid conflicts. I've also checked the inspector which shows:
font-size: rem-calc(70);
But it has a strike through.
Where am I going wrong?
In Foundation, rem-calc() is a SASS function that converts pixels to REMs. If you're seeing rem-calc in your processed CSS, your SCSS file didn't get properly processed. You should see something like 1.5rem in the output CSS file.
Make you sure your SASS file is being processed. If you see other SASS functions in the output CSS file, that's an indication that it has NOT been processed. Whatever processor you're using should give you errors to indicate what part of the SASS file is problematic.
Related
I was looking for an easy way to prefix a style sheet and sass works just great. I don't need any building tool, just vs code sass extension, and press watch.
What I did was, renamed the css to scss and then imported it inside the main style nesting in the selector I want, like:
#wrapper {
#import 'style1';
#import 'style2';
}
The issue comes when one of the files has #font-face, they also get prefixed and that is a problem. I checked the issue tracker and apparently this is the correct behavior.
https://github.com/sass/sass/issues/2442
Given that. I am looking for a way to import only the #font-face rules to the root instead of the #wrapper selector.
Is this possible without having to change the content of 'style1' or 'style2' ?
I was able to get around this problem with node sass magic importer.
But again you need node scripting and terminal, but can be mitigated with a bundler which kinda is not what I want but at least I can sort of prebuilt it and still use a watcher.
But given the hasle to set this up for such a simple thing I would just go to the style sheet and copy the font-faces to the root of the main file anyways.
If anyone knows a solution with sass only please reply.
So I am having this Ghost theme (liebling) that I'd like to modify to my needs. E.g. I'd like to change the font-size of the post title and content.
As the theme is quite complex (at least for me) I am having a hard time to figure out which setting has been made in which SCSS file.
When I start Google Chrome and inspect elements it points me to the CSS file that makes the setting. However it doesn't point me straight to the SCSS file it got created from. Of course it doesn't, as this would require some form of debug-database so chrome is able to deduce/know which SCSS files where involed creating that specific CSS.
So long story short: How can I find out which SCSS file lead to which CSS setting?
I have a periodic problem when PhpStorm automatically compiles SASS into CSS files.
Sometimes it misses some letters in final CSS file.
For example after I write
body
color: #fff
I get the following CSS
body {
color: #ff;
}
Though the last character is missed. Sometimes it works as it should and compiles everything correctly. Looks like compiler saves changes to css file before SASS changes are completed or vice versa it doesn't catches all my changes in SASS file.
What could be the problem and what is possible solution?
I had the same issue. This is caused when phpstorm option to 'always' update is turned on. Whenever phpstorm detects a change it triggers the sass compiler with whatever you have in place. Sometimes it triggers before you finish writing. As far as I know the only solution is to either change to ' update on save '. Or to made a small change like a space and it will retrigger the compiler.
I am using Bootstrap theme in Drupal CMS.
I use Firebug to check the CSS class and HTML elements of the page.
But whenever I check, it is showing CSS class/ which is the understood, However, is there a way we can check the corresponding LESS variable?
For Example:
If we check button using firebug, the .btn CSS selector will shown font-weight: normal;,
.btn {
font-weight: normal;
}
And Corresponding LESS,
#btn-font-weight: normal;
Shortest answer: no, but if you run
lessc less/style.less css/style.css --source-map
before your watcher you'll be able to
use your inspector to see which LESS file each style comes from.
Not what you're hoping for, but it least it'll help you track things down.
The loong answer
There is no way to see .btn {font-weight: #btn-font-weight} when inspecting the compiled styles, necessarily: compiling LESS to CSS replaces the #btn-font-weight with normal.
As hinted at by #tjaart-van-der-walt, using source maps may be helpful for you. With sourc emaps, you still won't see raw LESS variables but you will be able to jump right to the LESS file where the style is defined… the right line, even. You'll still need to refer to your original file to sort out LESS-specific code, but at least you'll know exactly where to look (e.g. my-partial-less-file.less:18 rather than my-compiled-css.css:212).
So if you have a one.less
* {
background: red
}
and a two.less
* {
border: 1px solid green
}
that compile to main.css
* {
background: red;
}
* {
border: 1px solid green;
}
in the inspector you'll see something like
where before you would have seen something like
("something like" because these are Chrome screenshots.)
There are two steps to getting source maps working: 1. set up a main file (mentioning this for anyone else who reads this question; in your case this is already taken care of: less/style.less is your main file), 2. generate the source map, and 3. enable source mapping in your inspector.
1. When we get to B, it's going to be save a lot of hassle if we can just generate the source map off a single file. That requires structuring the LESS files with a main file that #imports all your other files. For example,
/styles
└─┬─ main.less
└─ components
└─┬─ one.less
└─ two.less
and main.less looks like
#import 'components/one';
#import 'components/two';
Not exactly sure what your copy of the Bootstrap Drupal theme, but in the copy I downloaded from your link it looks like the file of interest is less/style.less so you don't have to do anything here.
2. There are a bunch of ways to generate source maps while compiling LESS to CSS (there are dev apps that will do it, grunt and gulp tools, and command line tools). Since you're using using the bare command line tool Deadsimple LESS CSS Watch Compiler, let's stick with that model.
In order to run less-watch-compiler, you've already installed LESS. In case anyone else reading this hasn't, to do that you run
$ (sudo) npm install -g less
Among other things, that installed the compiler lessc, which has support for generating source maps. Run
$ lessc less/style.less css/style.css --source-map
This says "run the less compiler on less/style.less, output the compiled stylesheet to css/style.css, and generate a style.css.map sourcemap. (Full lessc documentation is here.)
(2.5 at this point you can run your less-watch-compiler less css, and follow your normal workflow)
3.
Turn on source mapping in your browser's inspector. Firebug doesn't support source mapping, but Firefox's built-in inspector does: open the inspector, right-click on any style, and select "show original sources." Mozilla's documentation is here. (Fwiw, Firebug is on track to be merged into Firefox's Developer Tools. Learn about that here.) Chrome also has built-in support: inspector --> "..." menu (top right) --> Settings --> "Sources: Enable CSS source maps" (for me, this was turned on by default), and so does Edge (documentation here; appears to be turned on by default).
For using a site like jsfiddle or cssdesk, how would I pull all the css rules that apply to my element together in one place? My CMS has a pretty large number of CSS files that act on the same elements.
Use Firefox's built-in inspector (not firebug) to inspect the element. In the column that pops up for the inspector, choose "Computed" tab.
Highlight all the styles you want, then right click and choose, Copy Selection.
Go to your jsFiddle or CSSDeck, paste in the properties, and surround it with your rule:
h1 {
... your copied stuff here ...
}
NOTE: you'll need to add semicolons to the end of all the properties.
Not sure if I'm understanding the question properly, but I think you're asking how to apply all the same styles on a fiddle that are applied on your own site. If that's the case, then on jsFiddle, in the left nav, there is an Add Resources option. If your site is public, then you can enter in the direct url to your css file(s) there.
Then any html you enter in the fiddle should get the styles from those css files applied in the result when you run it.
Two answers spring to mind:
The first is simply to upload your CSS files from your laptop to a server somewhere. You could also run a webserver from your laptop if you can open port 80 from your router to your local computer. You could get a static URL to your IP address from a service like No-IP Free.
Use a CSS pre-processor like SASS or LESS when composing your CSS on your computer. This requires a bit of a change to your workflow, but you will find the changes make life as a web developer much easier in the long run. Both SASS and LESS understand vanilla CSS, so you don't have to change your existing files, just the extensions. They also both have the ability to import other SASS or LESS files on your computer, and include them in the output generated CSS. So, using SASS for an example… if your main CSS file is called screen.css, move it to screen.scss. The SASS pre-processor will read through and render the file back to CSS after you make changes. Now, to include another file in your screen.scss file, add #import 'newFile.scss'; and the CSS file SASS generates will include both screen.scss and newFile.scss.Following this design paradigm has the additional benefit of keeping all your CSS in one output file. It is recommended that you keep all your CSS in one file to minimize server requests (see Should I still bother keeping all css in one file? for discussion).