I want to add a class at the start of each line of my css
I want
.more {
padding: 5px 10px 0;
}
#fbook {
display: inline;
float: left;
margin: 0 0 0 4px;
width: 320px;
}
to look like
.test .more {
padding: 5px 10px 0;
}
.test #fbook {
display: inline;
float: left;
margin: 0 0 0 4px;
width: 320px;
}
something like this.
^([A-Za-z0-9]+)$
would work if my css looked like this
more
{
padding: 5px 10px 0;
}
fbook
{
display: inline;
float: left;
margin: 0 0 0 4px;
width: 320px;
}
but I can't seem to get anything working when to find the . # {
Try this
$result = preg_replace('/(?i)^([.#a-z]+\{)$/m', '.test $1', $subject);
Explanation
"
(?im) # Match the remainder of the regex with the options: case insensitive (i); ^ and \$ match at line breaks (m)
^ # Assert position at the beginning of a line (at beginning of the string or after a line break character)
( # Match the regular expression below and capture its match into backreference number 1
[.#a-z] # Match a single character present in the list below
# One of the characters “.#”
# A character in the range between “a” and “z”
+ # Between one and unlimited times, as many times as possible, giving back as needed (greedy)
\{ # Match the character “{” literally
)
\$ # Assert position at the end of a line (at the end of the string or before a line break character)
"
You can use a modern tool like LESS. Simply take your code, and wrap it with .test{ }:
.test {
.more {
padding: 5px 10px 0;
}
#fbook {
display: inline;
float: left;
margin: 0 0 0 4px;
width: 320px;
}
}
If you only need it one time, you can do it online: http://leafo.net/lessphp/#demo
If you want to do it from time to time, there are less libraries for many languages which you can use, and a client side JavaScript option.
Related
I have a css file with the following structure:
#reg-1 {
top: 7.13%;
left: 7.36%;
height: 16.06%;
width: 85.14%;
}
#reg-1-magTarget {
top: 64.13%;
left: 36.36%;
height: 12.06%;
width: 99.14%;
}
#reg-2 {
top: 26.25%;
left: 21.49%;
height: 26.17%;
width: 55.19%;
}
#reg-2-magTarget {
top: 33.09%;
left: 17.27%;
height: 26.41%;
width: 45.04%;
}
And wanted to find a way to match the values of "#reg-1 {" by replacing the ones of "#reg-1-magTarget {" in notepad++ with regular expressions
to something like this:
#reg-1 {
top: 7.13%;
left: 7.36%;
height: 16.06%;
width: 85.14%;
}
#reg-1-magTarget {
top: 7.13%;
left: 7.36%;
height: 16.06%;
width: 85.14%;
}
#reg-2 {
top: 26.25%;
left: 21.49%;
height: 26.17%;
width: 55.19%;
}
#reg-2-magTarget {
top: 26.25%;
left: 21.49%;
height: 26.17%;
width: 55.19%;
}
I really don't know much about this but I was interested and I was trying combinations
I began to structure little by little the regex necessary to match it
try first
#reg-(\d) {
then I corrected it with this
#reg-(\d{1,2}) {
then i completed it
#reg-(\d{1,2}) {(\r\n)top:\s\d{1,2}(\r\n)left:\s\d{1,2}
then change to
#reg-(\d{1,9})-magTarget(\s){(\r\n)top:(\s)(\d{1,9})(\r\n)left:(\ s)(\d{1,9})
then search, I think it could work something like:
^(.+?)\h+:\h+"
by
$0$1
what makes this
Afghanistan: ''
be
Afghanistan : 'Afghanistan'
You can try (regex101):
(#reg-\d+)(.*?})\s+\1-magTarget.*?}
And for replacement
\1 \2\n\1-magTarget \2
Note: check Regular expression and . matches newline:
Find what:
(#reg-\d+)([^}]*})\R\K\1-magTarget[^}]*}
The pattern matches:
(#reg-\d+) Capture group 1, match #reg- and 1+ digits
([^}]*}) Capture group 2, Match 0+ times any char except } and then match }
\R\K Match a newline and then forget what is matched so far
\1-magTarget A backreference to the same what is matched in group 1, followed by matching -magTarget
[^}]*} Match 0+ times any char except } and then match }
Replace with:
\1-magTarget \2
See a regex101 demo.
But perhaps you can prevent the duplication of the css by writing the result as:
#reg-1, #reg-1-magTarget {
top: 7.13%;
left: 7.36%;
height: 16.06%;
width: 85.14%;
}
#reg-2, #reg-2-magTarget {
top: 26.25%;
left: 21.49%;
height: 26.17%;
width: 55.19%;
}
Find what:
(#reg-\d+)([^}]*})\R\1-magTarget[^}]*}
Replace with:
\1, \1-magTarget\2
See another regex101 demo.
I want to find and mark all the code that doesn't fit my regex.
[^\}]*navbar[^\{]*\{[^\}]*[\}\s]*
Basically I want to mark everything beside red-highlighted part
my-regex-at-work.jpg
The code:
.pull-right>.dropdown-menu {
right: 0;
left: auto
}
.dropup .caret,
.navbar-fixed-bottom .dropdown .caret {
content: "";
border-top: 0;
border-bottom: 4px dashed;
border-bottom: 4px solid\9
}
.dropup .dropdown-menu,
.navbar-fixed-bottom .dropdown .dropdown-menu {
top: auto;
margin-bottom: 2px
bottom: 100%;
}
#media (min-width:768px) {
.navbar-right .dropdown-menu {
right: 0;
left: auto
}
.navbar-right .dropdown-menu-left {
right: auto;
left: 0
}
}
.btn-group,
.btn-group-vertical {
position: relative;
display: inline-block;
vertical-align: middle
}
My ideas do not work
[^[^\}]*navbar[^\{]*\{[^\}]*[\}\s]*]
[^[[^\}]*navbar[^\{]*\{[^\}]*[\}\s]*]]
it seems to be not possible with notepad++ because of backtracking, it could be done if regex engine supports control verbs:
[^\}]*navbar[^\{]*\{[^\}]*[\}\s]*(*SKIP)(?!)|.*
regex101
to tell to the engine to skip the matched part and fail, otherwise when engine fails to match it continues with input cursor on next character.
Append \K|.* to your regex:
[^\}]*navbar[^\{]*\{[^\}]*[\}\s]*\K|.*
Then hit Mark All button.
I want to clean out everything between #media and }. Only after research I still cannot find how. I want to replace everything between the BOLD text below, including the BOLD text itself:
#media all and (max-width: 240px)
{
#toast-container>div
{
padding: 8px 8px 8px 50px;
width: 11em;
}
#toast-container .toast-close-button
{
right: -.2em;
top: -.2em;
};
}
#media (min-width: 768px)
{
.lead
{
font-size: 19.5px;
};
}
RESULT 1: #media }
RESULT 2: nothing
In Replace Dialog(Ctrl+H), enable Regular Expression and . matches newline
Then, search for:
#media.*?\};.*?\}
or
#media.*?(\};)\s*?\}
And replace for empty string... (this will remove all - including bold text)
Let me know if it works.
The other day I had to prefix every single CSS selector with another tag in order to increase its specificity. I though I'd flex my regex muscles a bit and I came up with this regex:
(^(((\s)+)?(?!.+: )(?!\.IE)[a-z.].+?)([,{]))
The plan was to replace the entire captured match with something like 'body $1'. There are a couple of negative lookaheads to avoid matching lines like background-color: property and .IE selectors
The screenshot describes the problem:
Here is some sample text:
/* line 18, ../scss/SplashPage/_page.scss */
* {
-webkit-tap-highlight-color: transparent;
}
/* line 35, ../scss/SplashPage/_page.scss */
body header {
*zoom: 1;
background: #eaeaea;
}
/* line 221, ../scss/MainStyle/_mixins.scss */
body header:before, body header:after {
display: table;
content: "";
}
/* line 224, ../scss/MainStyle/_mixins.scss */
body header:after {
clear: both;
}
body .utility-nav {
right:0
}
/* line 40, ../scss/SplashPage/_page.scss */
body .home-link {
text-indent: -99999px;
white-space: nowrap;
overflow: hidden;
background: transparent url("~/images/clipsal-logo2.png") center center no-repeat;
background-image: -webkit-linear-gradient(transparent, transparent), url("~/images/clipsal-logo.svg");
background-image: linear-gradient(transparent, transparent), url("~/images/clipsal-logo.svg");
background-position: top left;
background-repeat: no-repeat;
display: block;
float: left;
/*width: 120px;
height: 50px;
margin: 20px 0px 15px 25px;*/
background-size: 100% auto;
}
I think it's the start of line anchor (^) that needs do be dropped. Having said that I am not sure what the regex should be :)
Note: I understand that the problem could have easily been solved using SASS, but where's the fun in that!
Thanks
This is my regular expression to get "left" and its value.
/(left\s*:\s*)(\d+)?(px)/
My problem is, it pulls padding-left and left.
vertical-align: top; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; display: list-item; width: 420px; position: absolute; top: 0px; left: 700px; height: 580px;
How can I get "left" and its value only?
I put a \s in front of left and that works... But I can't always guarantee there will be a space in front of left.
Thanks...
/(?:^|[^-])(left)\s*:\s*(\d+|auto)([a-z]{2})?/
Will fetch what you want with "left" in group 1, "700" in group 2 and "px" in group 3
(?:^|[^-]) = The start of the string, or a non-hyphen character
(left) = The word left (capture group 1)
\s*:\s* = A colon with optional space characters either side
(\d+|auto) = One or more numbers, or the string "auto" (capture group 2)
([a-z]{2})? = Two letters, e.g. "px" "em" "pt" (capture group 3 - optional)
Instead of using a RegEx, you could use a CSS parser. This is a more robust solution as a parser is better suited for this task.
An example using Python and cssutils
example.css
.myClass {
border: 1px solid black;
margin-left: 100px;
left: 700px;
padding-left: 50px;
}
get-left.py
#!/usr/bin/env python
import cssutils
sheet = cssutils.parseFile('example.css')
for rule in sheet:
if rule.type == rule.STYLE_RULE:
for prop in rule.style:
if prop.name == 'left':
print("{0}: {1}".format(prop.name, prop.value))
In this Python script, prop.name will return the name of the property and prop.value its value.
output
$ ./get-left.py
left: 700px