For instance:
<script>
export default {
data() {
return{
varinjs: 1,
}
}
}
</script>
<style lang="stylus">
varincss = varinjs
body
if varincss == 0
background-color red
else if varincss == 1
background-color blue
</style>
Is there a way to access JavaScript variables in CSS? I know I can use sass or less, but my preference is stylus.
Although this may not directly answer the question at hand (I originally intended to leave a comment), I will offer an alternative solution.
Stylus has a handy built-in function called json(path[, options]), allowing you to store all your variables in a JSON file and then use them in both your JS files and Stylus files.
Keep in mind that accessing Stylus variables using JS is not straightforward, and you may need to explore build-time libraries that can convert specific js files/variables into Stylus variables for this purpose.
One way to achieve this is by utilizing CSS custom properties.
By binding Stylus variables with them and handling changes in JavaScript, you can create dynamic themes for your web application.
<script>
export default {
data () {
return {
theme: { background: '#00ff00' }
};
},
watch: {
'theme.background': { immediate: true, handler: 'applyVariables' }
},
methods: {
applyVariables () {
const scope = document.documentElement.styles;
scope['--theme-background'] = this.theme.background;
}
}
};
</script>
<style lang="stylus">
theme-background = var(--theme-color, #00ff69);
.theme-button
background-color: theme-background;
</style>
For further information on CSS Custom Properties, consult the MDN documentation.
My current setup: Running Centos7 on VirtualBox (host OS : Windows 7) Node version: 6.10.3 Npm version : 3.10.10 Operating behind a corporate proxy I went ahead and installed vue-cli using the following command: sudo npm install -g vue-cli After that, ...
I have been struggling with styling an input field. I added a 1px solid #000 border around it, but now I need to include a thicker black line within the input itself. I tried using border-bottom: 5px solid #000, but that just created a border at the bottom ...
Here is an example of my HTML code with an initial background image: <div id="ffff" style="width: 200px; height: 200px; background-image: url('/uploads/backroundDefault.jpg')">sddsadsdsa<br>dffdsdfs</div> Everything seems to b ...
Just started using twitter-bootstrap and I'm trying to customize the navbar by removing borders and padding, adding a hover effect for links with a different background color, and setting margins of about 10px on the left and right. However, I'm ...
I am having an issue with my News.vue and News-View.vue. Whenever I navigate to news/1, it directs me to the News-View.vue page. The problem arises when there are multiple search filters (such as category, date, etc.) and infinite scroll implemented in the ...
My current challenge involves utilizing ngbootstrap for popovers, yet desiring to override its default styling. Specifically, I have a form that should function as a popover triggered by a button click, and it needs to maintain its own distinct styles. Up ...
Here's the method I'm using, it's pretty straightforward. DailyCountTest: function (){ this.$store.dispatch("DailyCountAction") let NewPatientTest = this.$store.getters.NewPatientCountGET console.log(NewPatientTest) } The getter ret ...
Currently, I am utilizing Laravel version 5.8, VueJS, and Passport version 7.4 for handling Authentication in my project. Below you can find the code snippet for my login function: public function login(Request $request) { $validator = Valid ...
To begin using Nuxt.js, follow these steps: vue init nuxt/express myapp1 vue init nuxt/express myapp2 The structure of my projects is as shown below. /workspace/myapp1 (Nuxt.js application) /workspace/myapp2 (Nuxt.js application) Within my workspace, ...
One question that recently came up was: What is the best approach to tackling this issue? Developing a tool that enables designers to customize animations. To make this process easier, it is essential to create an AnimationSequence using JavaScript that ca ...
In my Vue.js project, I am trying to trigger a Vuex action in the created() lifecycle hook and then proceed to call an asynchronous method to fetch more data from the server upon receiving the initial data. The goal is to utilize this data in a component ...
Recently, I started playing around with Vue.js One of the challenges I faced was replacing a jQuery show/hide functionality that utilized .slideDown() / .slideUp() with Vue's v-show. While it worked, I found myself missing the smooth animations of jQ ...
In my application, I am using a kendo grid with filterable set to true. The filtering functionality is working properly. However, when I click on the filter symbol, the filter menu opens and I noticed that the size of the text-box within the menu is too sm ...
One problem I am facing is that when I click a specific button in a table, all buttons end up in loading mode. The table loops and displays data from an API, with a button embedded in each row. Upon clicking the button, it should send the ID of the clicked ...
When I use .show instead of .box.show in the CSS, the even boxes do not come from the left side. This discrepancy has left me puzzled as I assumed they would have the same effect. However, it appears that in this particular code snippet, they are behaving ...
Last year, I created a responsive navigation component for one project and decided to reuse the code for my current project. However, when implementing it, I encountered an issue where the console displayed: [vuex] unknown action type: nav/toggleSidebar ...
I have a situation where I need to apply an 'active' class to a specific div element when it is clicked. I am attempting to bind the 'active' class based on a variable 'activeSlide' being equal to the element. v-bind:class="{ ...
Looking for a solution to align text and checkbox without using a blank image; I have the following HTML code: <span><b>System Type</b></span> <img src="~/Content/images/blank_img.png" alt=" ...
Discussing the limitations of CSS in a forum thread, a user shared insights: A user mentioned that Internet Explorer has is known to have a restriction of 4096 CSS rules per file. For more information, check out this source. Additionally, there might be ...
While utilizing FLEX in my code, I noticed that the output is not what I expected on iOS 7/8 devices. <div className="modal-row"> <div className="col1"> <span>{dict.YourServiceNumber}</span> </div> <div ...