I want to have one variable that contains the root path to all my images in my CSS file. I can't quite figure out if this is possible in pure Sass (the actual web project is not RoR, so can't use asset_pipeline or any of that fancy jazz).
Here's my example that doesn't work. On compile it balks at first instance of variable in the background url property saying ("Invalid CSS after "..site/background": expected ")").
Defining the function to return the path:
//Vars
$assetPath : "/assets/images";
//Functions
#function get-path-to-assets($assetPath){
#return $assetPath;
}
Using the function:
body {
margin: 0 auto;
background: url($get-path-to-assets/site/background.jpg) repeat-x fixed 0 0;
width: 100%; }
Any help would be appreciated.
Have you tried the Interpolation syntax?
background: url(#{$get-path-to-assets}/site/background.jpg) repeat-x fixed 0 0;
No need for a function:
$assetPath : "/assets/images";
...
body {
margin: 0 auto;
background: url(#{$assetPath}/site/background.jpg) repeat-x fixed 0 0;
width: 100%; }
See the interpolation docs for details.
Was searching around for an answer to the same question, but think I found a better solution: http://blog.grayghostvisuals.com/compass/image-url/
Basically, you can set your image path in config.rb and you use the image-url() helper
Adding something to the above correct answers. I am using netbeans IDE and it shows error while using url(#{$assetPath}/site/background.jpg) this method. It was just netbeans error and no error in sass compiling. But this error break code formatting in netbeans and code become ugly. But when I use it inside quotes like below, it show wonder!
url("#{$assetPath}/site/background.jpg")
We can use relative path instead of absolute path:
$assetPath: '~src/assets/images/';
$logo-img: '#{$assetPath}logo.png';
#mixin logo {
background-image: url(#{$logo-img});
}
.logo {
max-width: 65px;
#include logo;
}
Related
I am developing a site which I wish to display correctly on devices with a notch (particularly the iPhone X as I own one).
In this page the following code sample is given:
#supports(padding: max(0px)) {
.post {
padding-left: max(12px, env(safe-area-inset-left));
padding-right: max(12px, env(safe-area-inset-right));
}
}
However when I have this set, in Chrome I can see that it's not valid (see photo linked below)
Is there a way to correct this or can an SCSS #if statement be used to detect if a parent element has padding > 0 and if not add 1rem of padding to it?
My problem is not the one mentioned here, this is how I am using the code, I have also tried putting this in a standard CSS file without the unquote however its not working either.
If I read your question right you are referring to the css max function not the max function provided by Sass - also the example is CSS and hence needs the mentioned Sass 'hack' to work in SCSS.
The first thing you need to deal with is the iOS 11.0 - 11.2 implementation using constant. The easiest way to do this is to assign the safe-area-inset to CSS variables.
In the example below I've created a default value of 0px for all variables – but you could also use fallback values when using the variables var(--some-var, 12px) (uses 12px if --some-var is not defined).
The second part is your code using the --safe-area-inset variables.
I hope it makes sense :-)
:root {
/* -------------------------------------------------------------------
Assign the default/constant/env values to CSS variables
*/
--safe-area-inset-top : 0px;
--safe-area-inset-right : 0px;
--safe-area-inset-bottom: 0px;
--safe-area-inset-left : 0px;
/* it is probably safe to skip the `constant` test in 2023 :) */
#supports (top: constant(safe-area-inset-top)){
--safe-area-inset-top : constant(safe-area-inset-top);
--safe-area-inset-right : constant(safe-area-inset-right);
--safe-area-inset-bottom: constant(safe-area-inset-bottom);
--safe-area-inset-left : constant(safe-area-inset-left);
}
#supports (top: env(safe-area-inset-top)){
--safe-area-inset-top : env(safe-area-inset-top);
--safe-area-inset-right : env(safe-area-inset-right);
--safe-area-inset-bottom: env(safe-area-inset-bottom);
--safe-area-inset-left : env(safe-area-inset-left);
}
}
#supports(padding: Max(0px)) {
.post {
/* -------------------------------------------------------------------
Use the CSS variables in the max function
*/
padding-left: Max(12px, var(--safe-area-inset-left));
padding-right: Max(12px, var(--safe-area-inset-right));
}
}
You need to unquote max in #supports too, the referenced example should be:
#supports(padding: unquote('max(0px)')) {
padding-left: unquote('max(#{$susy-gutter-width}, env(safe-area-inset-left))');
padding-right: unquote('max(#{$susy-gutter-width}, env(safe-area-inset-right))');
}
I want to create custom css unit, that I'll be able to use in sass with node.js. Is there any guide about creating sass plugin for this? Just for example, I want to create unit "dpx", that will work as double pixel, so "width: 20dpx" will be processed to "width: 40px".
Other solution (not sass plugin), that can work with node is also acceptable.
Use a SASS function that accepts a font-size and returns the value doubled.
#function dpx($size) {
#return $size * 2;
}
div {
font-size: dpx(20px); // output: font-size: 40px;
}
As a simplified version of the current answer, you could also write the following:
$d: 2px;
div { font-size: 20*$d; }
I know this is an old question, but since I found it, other people will find it too.
In such case as yours a good solution would be to make a 1rem equal to 2px.
You can do it this way:
html {
font-size: 2px;
}
now each 1rem will be equal to 2px. If you want to make sure this doesn't break your current page, you can always add
body {
font-size: 8rem;
}
to set the global font-size to 16px (just a guess since this is a default value).
Here is my website : http://sourcingstrategybd.com/
I want to change (margin-bottom:100px;) in (#header-wrapper-sticky-wrapper)
but I cant find this exact location in folder => file.
Please help me, how can I change this margin.
For details please view this Image
This style comes from javascript.so this css code will be removed from js file
If you can't do this from your header php file you should be able to achieve this from your css files I believe.
Put this
#header-wrapper-sticky-wrapper {
margin-bottom: 0!important;
}
This must work unless your'e doing any mistakes.
Thanks
Add this code to your stylesheet:
#header-wrapper-sticky-wrapper.sticky-wrapper {
margin-bottom: 0 !important;
}
Its look like inline style css
so change it from that php file. or another way.
add this in your css.
.sticky-wrapper {
margin-bottom: 0 !important;
}
Still not work then try this
#header-wrapper-sticky-wrapper {
margin-bottom: 0!important;
}
$(document).ready(function(){
$("#header-wrapper-sticky-wrapper").css('margin-bottom','0px');
})
You can add this script in your footer
I am having list of css files and every css file has different image location code written like url(../_images/headerImages.jpg), now I am placing my images to some other domain therefore I want to create a variable like var domainPath = http://sitename.com so that at every url(../) I could write something like url(domainPath+ '/images/headerImages.jpg').
Example
var DOMAIN_PATH = http://www.mysite.com;
#header {background: url(DOMAIN_PATH/_images/headerimage.jpg)no-repeat; }
Please help me..
You cannot use variables in plain CSS. I suggest using a CSS preprocessor which is a language that compiled to CSS. SASS is fantastic and you can do what you ask like so:
$domainpath: url(http://www.mysite.com/_images/bg-header-noodletools-express.jpg);
#header {background: $domainpath no-repeat; }
Another alternative is LESS.
As mentioned in https://ishadeed.com/article/css-vars-101/ and others, it is possible to use variables in CSS now.
You can do:
:root {
--domainpath: url(http://www.yourdomain.com/_images/bg-header-noodletools-express.jpg);
}
#header {
background: var(--domainpath) no-repeat;
}
Unfortunately, CSS is not dynamic but you can do something like this:
store your URLs in the: root selector Which represents the root element and is identical to the selector html, except that its specificity is higher.
use the URL variable
:root {
/* define your variables here */
--url1: url(http://sitename.com/image1);
--url2: url(http://sitename.com/image2);
}
.img {
background-image: var(--url2);
width: 200px;
height: 200px;
}
Full source code: here
I am using the LESS styling language.
Consider the following CSS:
.side-bg
{
background:url(../img/layout/side-bg.jpg) top no-repeat;
}
Right now all of my images are in the folder ../img/ I wanted to be able to set a variable as the image path and use it like so:
#image-path: ../img;
.side-bg
{
background:url(#image-path/layout/side-bg.jpg) top no-repeat;
}
This does not work however. Its not a huge deal, I could always use find and replace if the image folder ever changed. I am just starting to learn LESS and was wondering if something like this is possible.
Try using string interpolation for things like this. Look for “variable interpolation” in docs.
#base-url: "http://assets.fnord.com";
background-image: url("#{base-url}/images/bg.png");
The solution:
.side-bg
{
background : ~"url( '#{image-path}/layout/side-bg.jpg' )" top no-repeat;
}
I was searching for the same question and found this page. Thought I would post my solution as someone else might find it useful...
#iconpath: '/myicons/';
.icon (#icon) {
background: no-repeat url('#{iconpath}#{icon}');
}
.icon-foo { .icon('foo.png'); }
.icon-bar { .icon('bar.png'); }
.icon-spuds { .icon('spuds.png'); }
which compiles to (used http://winless.org/online-less-compiler)
.icon-foo {
background: no-repeat url('/myicons/foo.png');
}
.icon-bar {
background: no-repeat url('/myicons/bar.png');
}
.icon-spuds {
background: no-repeat url('/myicons/spuds.png');
}
Here is an updated and clean way to handle image paths with LESS:
Start with your variable:
#imagePath: ~"../images/bg/";
Then use it like this:
.main-bg {
background: url('#{imagePath}my-background-image.png') repeat scroll left top;
}
Make sure the #imagePath variable points to the images folder from wherever you have your compiled CSS, NOT from where you have your LESS files. Also, you have to escape the address in the variable as in the example above to ensure that it does not get rewritten by less.js.
Anton Strogonoff's answer is good but be aware of the Issue #294:
Using the above which comes straight from the docs, I get url://pathtolessfile/variable I set. Even though I'm trying to set an absolute URL instead of a relative one. For example this works
#base-url: "../../images/";
#background-image : url ("#{base-url}/bg.png");
But this does not work
$base-url: "http://localhost/ns/assets/images/";
#background-image : url ("#{base-url}/bg.png";
In the latter example, my final source path becomes
http://localhost/ns/assets/css/libs/http://localhost/ns/assets/images/bg.png
Relative urls can be handled by the command line compiler, supposedly. There's probably some similar option you can set in the file watcher.
https://github.com/cloudhead/less.js/wiki/Command-Line-Usage
EDIT: There totally is. Just look: http://lesscss.org/usage/#command-line-usage-options
relativeUrls: true