I have been trying to figure out why vs code is not picking up CSS language inside the JSX file. When I'm writing CSS IntelliSense does not offer suggestions for CSS it only shows emmet suggestions.
I have downloaded different extensions like JS JSX Snippet or styled-jsx hoping I am missing an extension and they did not work. In the video that I'm following on youtube, inside the BoxContainer the key and value width:280px for the CSS code have different colors to mine where mine is just brown throughout, for the instructor it's aqua and mint.
You are using styled-components. There's an extension to VSCode to syntax highlight that style code (since it's not really SASS).
https://marketplace.visualstudio.com/items?itemName=styled-components.vscode-styled-components
Related
Currently, I can only see either one of them while viewing the styling of an element in DevTools.
Is there an extension or a setting that would let me see both the generated CSS as well as the source SCSS?
That would be especially useful when the SCSS is using mixins or functions and I would like to verify that the output CSS is correct.
I know I can achieve this by checking/unchecking the "Enable CSS source maps" in the DevTools settings, closing and relaunching DevTools, but that is a cumbersome and time-consuming method.
I am following a tutorial to set up my bootstrap 4 environment by using node package management and sass. I installed bootstrap using npm install bootstrap command and then import the source code to a main.scss file using the #import "node_modules/bootstrap/scss/bootstrap". I then installed Ruby and SASS with gem install sass, so it enables me to run sass main.scss main.css to convert boostrap file to a css file that can be link to the html file.
However, the boostrap code only works in IE but no Google Chrome. I inspected the code in google chrome and it seems it is reading the code all right, but don't know why bootstrap is not working in this case as you can see the form is not styled at all. so confused now.
I searched for what cause the problem and found out that there is someone's answer that might be relevant to my problem:
IE and Edge are not fussy : stylesheets are rendered regardless of
the encodings. But Chrome is totally intolerant of unmatched
encodings.
How can I change the unicode for my css file when it is generated by sass in the background? In addition, how to change the code to meet the same standard as my html file? is this unicode related issue??
I guess there is no point to show the code since main.css was created by sass for Bootstrap 4. I am not sure if someone has experienced a similar situation and know what I am talking about?
Try installing node-sass (https://www.npmjs.com/package/node-sass), and also install "npm install bootstrap" and import it as 'bootstrap/dist/css/bootstrap.min.css' which will import bootstrap4 (latest)
I am currently using IntelliJ IDEA 13 Ultimate Edition and I use Stylus as a CSS preprocessor and I really would like to add IntelliJ support for the Stylus' #import feature
Example
colors.styl contains
$nice-color = lightgreen
and foo.styl contains
#import "colors"
body
background-color $nice-color
This will evaluate to a css like this
body {
background-color: #90EE90
}
Question
My IDE will show me a nice little color-preview box next to the line-numbers in the editor.
But this only works for the colors.styl file, where the color is defined.
(https://www.jetbrains.com/img/webhelp/colorPreview.png)
I really would love to see the same preview-box in the foo.styl file, where I import and actually use this color. I already installed the Stylus plugin for IntelliJ.
Is there any way to achieve this?
I think it is not possible without changing the source of the Stylus IDEA plugin.
There have been some questions regarding this topic before but I am a bit lost and I would appreciate someone to explain this to me in a different way.
Context: I am using twitter bootstrap in my rails app (without Less, not familiar with Less or what it is but that's a separate issue)
I have been teaching myself CSS and when looking at the application.html.erb file in my rails app it calls certain classes such as "nav-bar" and "container-fluid nav-collapse". I am trying to find the css file where these classes are defined (so that i can customize them) but I cannot find it. So far I have tried the bootstrap_and_overrides.css and application.css.scss files but couldnt find the navbar class. Also I have tried these links: Bootstrap CSS Editing
Editing navbar text color in twitter bootstrap but I wasnt able to have any luck.
You should never directly edit bootstrap css files.
For whatever you need to update as you mentioned use bootstrap_and_overrides.css or your custom.css file for overriding original classes and divs.
The best way to find where the classes are in css file is if you are using firefox, click:
Inspect Element and on the right side you will see the name of .css file where this class is saved.
But when you have class name you can just override this class with your rules. Don't forget to include your custom.css file though.
If you still have troubles finding where particular classes are hiding you can use firebug to track what files are loaded like this:
For each file you have the source where you can see the path and find the elements.
I love working with Codepen and I'm trying to import a css file from Pastebin.
Here is a link to my external file hosted on Pastebin:
http://pastebin.com/raw.php?i=mj9dmzZw
and inside that file I link to my actual font files.
I'm not sure what I'm doing wrong. Could anyone point me in the right direction or let me know if this is even possible.
Here is the actual codepen. http://codepen.io/ryanjgill/pen/CLitH
Inside the CSS section I have commented out the styling that I'm trying to include with the external CSS file. If you uncomment the styling for the iconfonts, you will see icons in the column 'Type'.
I have tried linking the flie in the settings of the css section that is built into codepen. And using the "#include url('http://pastebin.com/raw.php?i=mj9dmzZw')" inside the css.
Well, on CodePen page, there is a small letter 'g' top-right of css input box.
You can import your .css there i think.
If you need some .css extension to your file for importation, just create a new file.css and #import your Pastebin css from within your new file.css