The #import "reset.css" in Stylus .stylfile would generate #import "reset.css" entry in CSS.
Is there a way to make Stylus to instead include the content of the included CSS file?
Yes you can specify this in the options param of the stylus.render function, like
stylus.render(inputString, {'include css': true}, cb)
Related
I need to remove the part of image, css and js urls so that I would keep everything that goes after "."
For example,
https://test.com/en/images/footer-inst-icon.svg
I would like to have only "svg" in another column
Here is the link to the file https://docs.google.com/spreadsheets/d/1VJPQzkgZCTaKCgRbstVFDCwycZFfCbSL1ENXPYcioNo/edit#gid=0
Try below formula (see your sheet)-
=ArrayFormula(TRIM(RIGHT(SUBSTITUTE(A2:A,".",REPT(" ",100)),100)))
You can also use REGEXEXTRACT() like
=ArrayFormula(REGEXEXTRACT(A2:A,"\w+$"))
I have tried to to that using this line of code but it doesn't work
#import url("Javascriptfile.js");
and <script type="text/javascript" src="Script.js">
these two ways doesn't work.
in js file I have
export const PrimaryColor = "#4267B2";
and I want to import it in my css file how can i do it?
I do not believe this is possible in any way.
You can manipulate CSS with JavaScript to a certain extent, but it is mostly done through DOM manipulation (acting on class names) or generating CSS programmatically (but it is still CSS in the end).
I don't think it is ever possible to access "JavaScript world" from the scope of CSS.
However, if you want to use variable names in CSS to reference constants, like colors, sizes, etc., you can use the CSS custom properties feature : https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
I am trying to create a custom theme by changing the default colors on carbon.
I have imported the carbon components scss files and I set the variable $carbon-theme as recommended but it is not working. I have imported them in my main index.scss file. I would eventually like to change the color variables and create a customized theme.
This is my index.scss file
#import 'carbon-components/scss/globals/scss/styles.scss';
#import '#carbon/themes/scss/themes';
#include carbon--theme($carbon--theme--g100);
body {
background-color: $ui-02;
}
This is the mixin I am trying to create.
#mixin custom-color {
$focus: green;
}
The above does not work. The theme does not change to the expected dark gray background. How do I do this? Also, how would I create the mixin to set other colors?
#import '#carbon/themes/scss/themes';
// Use the gray 100 theme
$carbon--theme: $carbon--theme--g100;
#include carbon--theme();
#import 'carbon-components/scss/globals/scss/styles.scss';
body {
background-color: $ui-02;
}
And not put it into index.scss, put it into App.scss and import it in App.js
works for me, hope this work.
I want to override vuetify variables with custom colors by following this
I've created a stylus folder which contains base folder (_colors, _typography) and main.styl file. The _color file is imported into main.styl file, which the latter is imported into main.js
Here is my file structure:
And the imports are included in main.js:
import '../node_modules/vuetify/dist/vuetify.min.css'
import './assets/stylus/main.styl'
Inside the _color.styl, I have this test code:
$red = {
"base": #FF0000,
"darken-1": #e50000,
"darken-2": #990000,
"darken-3": #7f0000,
"darken-4": #000000,
}
The custom colors aren't showing...am I missing something here?
As #webdevdani mentionned it, I don't think overriding vuetify style is possible.
I propose you a workaround : use a theme.
In your main.js you can set colors, like this :
Vue.use(Vuetify, {
theme: {
primary: '#FFA726',
secondary: '#29B6F6',
anyColor: '#0000'
}})
And you'll be able to call it like this in any of your app's component :
color="primary"
or
color="anyColor"
Source and more info about Vuetify theme
You need to declare the variables before importing Vuetify. Switching the order of imports should work, assuming that main.styl imports your modified _color.styl.
Quote from the documentation:
Now that stylus is configured, you can set default values for the stylus variables that you wish to change. These must be declared before the import and will automatically override the Vuetify defaults.
You can see all the variables you can change in here.
#font-face seems quote straightforward to setup in my CSS, and yet, my defined font is not being used. This is in a CakePHP 2.2 webapp, and despite trying all sorts of CSS URL path combinations, external CSS -v- inline CSS and single quotes/no quotes/double quotes in the CSS; nothing's working.
Here's the CSS:
<style>
#font-face {
font-family:TerminatorTwo;
src: url(../files/TerminatorTwo.ttf) format('truetype');
}
div {font-family: TerminatorTwo}
</style>
My app has the default CakePHP folder structure, so the CSS is in app/webroot/css and the font (just the .ttf) is in app/webroot/files
Instead of the div part in the CSS, I've tried inline style definition on a specific div. Didn't work. the code as seen doesn't work, and it doesn't work wherever I try adding quotes in the CSS, as I've seen in other examples elsewhere. All this has been trie din the latest versions of IE8 (yes, 8, yuck), Firefox and Chrome. Oh, and Chrome for Android.
I've messesd around with the path too, but to no avail.
Utterly frustrated. It's inherently so simple!
The font file is probably not loaded due to an invalid path. It's better to use the HtmlHelper for in these cases, as relative paths are bound to get messed up in a Cake install. Use the url() method to point to the files directory.
#font-face {
font-family:TerminatorTwo;
src: url(<?php echo $this->Html->url('/files/TerminatorTwo.ttf'); ?>) format('truetype');
}
Cake will make sure the URL points to the files directory in /app/webroot at all times.
Alternatively you could ditch the inline CSS and use an external stylesheet to avoid the issue with correct paths in Cake. In that case, if the CSS file is in the app/webroot/css directory, you could use the ../files/TerminatorTwo.ttf notation.